uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧亲测有用

我们要的是只允许同时播放一个视频
网上的很多方法只适用于h5（浏览器）打包就不行了。
一句话：除当前操作的视频外全部 pause()

app和h5通用版（建议复制黏贴html代码）亲测有效！！！ 重点在于：id 和：data-id
html：

<video :src="item.picUrl" @play="playing" :data-id="item.broadcastId" :key="item.broadcastId" :autoplay='true' @timeupdate='timeupdate' :id="'video'+item.broadcastId" controls  webkit-playsinline playsinline x5-video-player-type="h5" x5-video-orientation="portraint"></video>

js：

playing(e) {let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频idconsole.log("currentId", currentId);this.videoContent = uni.createVideoContext(currentId);console.log("this.videoContent", this.videoContent)let trailer = this.fwList;trailer.forEach(function(item, index) { // 获取json对象并遍历, 停止非当前视频if (item.template==5) {let temp = 'video' + item.broadcastId;if (temp != currentId) {console.log(temp);uni.createVideoContext(temp).pause(); //暂停视频播放事件}}})},

h5版
html：

<video :src="item.picUrl" @play="playVideo" :id="'video'+item.broadcastId" :poster="item.picUrl" controls :show-center-play-btn="false" auto-pause-if-navigate></video>

js：

playVideo (e) {//获取自定义的id值let currentId = e.currentTarget.id;// 创建视频实例this.videoContent = uni.createVideoContext(currentId, this)// 遍历数组 我这里template为5时是视频this.fwList.forEach((item,index)=>{if(item.template==5) {//获取视频的idlet tempId = 'video'+item.broadcastId// 与当前选择的id作比较 如果不是全部暂停if(tempId!=currentId) {uni.createVideoContext(tempId, this).pause()}}})},

获取视频第一帧
自动播放，监听播放大于0.2s时，循环咱暂停
js：

// 播放进度变化时触发timeupdate(e) {console.log(e)if (this.isInit&&e.detail.currentTime > 0.2) {   //判断播放大于0秒this.isInit = false  //初始化let trailer = this.fwList;trailer.forEach(function(item, index) { // 获取对象并遍历, 停止非当前视频if (item.template==5) {let temp = 'video' + item.broadcastId;console.log(temp);uni.createVideoContext(temp).pause(); //暂停视频播放事件}})}},

最后别忘记了关闭当前页面时关闭video

onHide() {if(this.videoContent) {this.videoContent.pause()}
},

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧亲测有用相关推荐

html 获取视频文件的宽高尺寸，怎么获取视频的宽度-解决方案
html代码 <video id="video" loop preload="auto" autoplay><source src=" ...
全景视频拼接（二）：双摄像头获取视频
项目要求:利用双摄像头同时采集两个视频,离线拼接,将两个视频拼接成一个视频. 该部分代码实现功能: 利用双摄像头获取视频 #include <iostream> #include < ...
android微信朋友圈视频无法播放,微信朋友圈不能分享手机视频怎么回事？微信朋友圈大视频功能安卓不能用吗？...
微信朋友圈不能分享手机视频怎么回事?微信朋友圈大视频功能安卓不能用吗?最近微信更新,用户可以进行分享自己手机里的视频,这一举措受到很多人的喜欢.那么微信朋友圈不能分享手机视频怎么回事?微信朋友圈大视频 ...
百度网盘百度云视频倍速播放方法亲测有用共6种，总有一个适合你
百度网盘百度云视频倍速播放方法共6种,总有一个适合你电脑方法1: 火狐浏览器,登录百度网盘,播放视频,右键,倍速方法2: microsoft edge 浏览器方法同上方法3: 谷歌浏览器 ...
android仿秒拍首页点击视频无缝播放器,Android 仿美拍,秒拍 ,视频封面选择.有图有真相....
代码不多,就懒得加注释了.原谅我的懒. 缩略图获取那块,没有加用线程.可能会在有些低端机上面或者高清的视频会出现FC的情况.需要的童鞋.自行添加. 附代码: package com.tan.video ...
android仿秒拍首页点击视频无缝播放器,Android 仿美拍,秒拍 ,视频封面选择.有图有真相....
代码不多,就懒得加注释了.原谅我的懒. 缩略图获取那块,没有加用线程.可能会在有些低端机上面或者高清的视频会出现FC的情况.需要的童鞋.自行添加. 附代码: package com.tan.video ...
朋友圈点赞发红包视频的播放Pc端微信加群app端微信加群测试用例的设计点
1.朋友圈点赞用例的设计点功能 (1)点赞是否实时显示结果 (2)点赞后显示的是否是自己的昵称 (3)点赞后是否可以取消 (4)取消后,重新点赞 (5)点赞后,其他共同好友点赞,是否有消息提醒 (6 ...
github视频录制播放相关功能－参考
http://www.cnblogs.com/niexiaobo/p/4933990.html github视频录制播放相关功能-参考 lookingstars/JZVideoDemo 视频播放器 U ...
Android SurfaceView+MediaPlayer+SeekBar实现视频控制播放
一个简单的视频控制播放,使用原生控件进行视频处理,可以根据需要可以自行扩展. 效果图: 遇到的问题1:mediaPlay.setOnPreparedListener()第一次播放无法初始化问题这个方 ...
桔子浏览器电脑版看不了视频怎么办视频无法播放怎么解决
桔子浏览器电脑版看不了视频怎么办?有很多桔子浏览器用户反映,在打开浏览器想要观看视频的时候,却无法播放,今天通过这篇文章给大家讲讲怎么处理. 桔子浏览器电脑版看不了视频怎么办视频无法播放怎么解决桔 ...

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧亲测有用

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧亲测有用相关推荐

最新文章

热门文章

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧 亲测有用

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧 亲测有用相关推荐

最新文章

热门文章

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧亲测有用

uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧亲测有用相关推荐