ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

微信小程序video 点击自动全屏播放

2026/9/19 3:30:59 拓冰建站 浏览量
微信小程序video 点击自动全屏播放

在这里插入图片描述

//因为这个地址可能是图片也可能是视频  点击 图片可以预览,点击视频可放大全屏自动播放。 代码如下
<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>