赞
踩
//因为这个地址可能是图片也可能是视频 点击 图片可以预览,点击视频可放大全屏自动播放。 代码如下 <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。