java
复制代码
//因为这个地址可能是图片也可能是视频 点击 图片可以预览，点击视频可放大全屏自动播放。 代码如下
<view v-else :class='{contentImg: x.picture.length==0}' style="margin-top: 10px;"
v-for="(x1, y1) in x.picture" :key="y">
<image v-if="imgType.includes(x.picture[y1].split('.').pop())" style="width: 217px;height: 167px; margin-top: 14px" :src="x.picture[y1]" @click="yulan(x.picture,y)">
</image>
<video :id="'video_play'+x.id" v-else style="width: 217px;height: 167px; margin-top: 14px" @play="playVedio(x.id)" @fullscreenchange="fullscreenchange" :src="x.picture[y1]" :poster="x.capture_videos_img" controls >
</video>
</view>
<script>
methods: {
yulan(url,index){
uni.previewImage({
urls: url, // 图片地址，urls是数组格式
current: index, // 选填：图片默认打开第一张；第一次打开的图片url地址
success: function(res) {
console.log("333",res)
},
fail: function(res) {
console.log("22",res)
},
complete: function(res) {
},
})
},
playVedio(index){
this.indexVideo=index;
//此处需要注意一下，因为是for循环里边的视频或者图片吗，这里id要保持唯一，不然会出现无论点击哪一个都会播放同一个视频的情况。
this.videoContext=uni.createVideoContext("video_play"+index,this);
//进入全屏状态
this.videoContext.requestFullScreen();
},
fullscreenchange(e) {
if (!e.detail.fullScreen) {
uni.createVideoContext('video_play'+this.indexVideo, this).pause();
}
}
}
<script>
