1***@qq.com
1***@qq.com
  • 发布:2021-06-25 16:44
  • 更新:2022-04-25 11:37
  • 阅读:4637

在uniapp中 一个页面多个视频,控制只播放一个,已解决

分类:uni-app

话不多说直接上代码

        <view class="" v-for="(item, index) in 4" :key="index">  
            <video  
                src="https://m.baopinstudio.shandongweipai.com/uploads/20210531/5d286b6a973181d96115b1e9c064f8b4.mp4"  
                :id="index"  
                @play="play(index)"  
                @loadedmetadata="loadedmetadata"  
                controls  
            ></video>  
        </view>
data() {  
        return {  
            trailer: []  
        };  
    },
methods: {  
        //执行loadedmetadata 这个函数会显示你video里的信息 视频长度,大小,等等  
        loadedmetadata(e) {  
            console.log(e);  
            //获取所有视频的id,也就是在video里定义的id  
            this.trailer.push(e.target.id);  
        },  
        play(index) {  
            //循环一下得到的下标  
            for (let i = 0; i < this.trailer.length; i++  ) {  
                //排除你播放的那个的下标  
                if (i != index) {  
                    //注意 这里的videoContext 第一个参数要是一个字符串  
                    uni.createVideoContext(i.toString()).pause(); //执行暂停  
                }  
            }  
        }  
        // 如果没有下标的话 可以直接获取e 里面会带有你这个视频的id 获取e的时候 @play不要带参数  
        // play(e){  
        //  console.log(e)  
        //  let createid = e.target.id  
        //      //循环一下得到的下标  
        //      for (let i = 0; i < this.trailer.length; i++  ) {  
        //          //排除你播放的那个的下标  
        //          if (i != createid) {  
        //              //注意 这里的videoContext 第一个参数要是一个字符串  
        //              uni.createVideoContext(i.toString()).pause();//执行暂停  
        //          }  
        //      }  

        // }  
    }
0 关注 分享

要回复文章请先登录注册

Alonge

Alonge

小程序中苹果手机可以,安卓手机播放和需要暂停的视频一直跳
2022-04-25 11:37
b***@qq.com

b***@qq.com

你的for循环是不忘了i++
2021-07-15 15:21