首先说一下我的应用场景, 在小程序中会有多个页面存在视频组件的情况, 为了防止视频播放时多个视频组件同时播放的情况,现记录一下方案:
一 可以在需要视频播放的地方弄一个视频播放的按钮, 当视频播放的时候再初始化视频组件, 保证整个应用内只有一个视频组件(视频组件的位置需要计算), 整个方法只是理论下的情况;
二 在appjs中 设置两个对象, currentVideoId(播放视频组件的id)和videoContext(当前播放视频的对象, 通过wxcreateVideoContext方法获得), 在页面的js中控制, 保证video组件绑定play方法:
<video src="url" bindplay="play"></video>
在play方法中实现即可:
var id = ecurrentTargetid;
if (id != null) {
if (appcurrentVideoId != id) {
if (appvideoContext != null) {
appvideoContextstop();
consolewarn("暂停");
}
appcurrentVideoId = id;
appvideoContext = wxcreateVideoContext(id);
}
}
因为currentVideoId 和videoContext是唯一的对象, 方法中播放监听事件会暂停之前的播放, 然后再赋值, 等下次video播放监听进来的时候, 会进行判断
三 包含富文本组件的视频组件同时播放的情况
依据上面的例子, 当自定义富文本组件中包含多个video组件时也用上面的方法会产生错误, 虽然log会显示将执行视频暂停或者停止播放, 但是没有效果, 查看 视频api , 提示
根据api显示, id为video组件的id, 还有一个"Object this", 但是依据上面的api使用, 直接用id确实可以获取video对象, 但是api解释中提示, "在自定义组件下，当前组件实例的this，以 *** 作组件内 video组件", 在自定义组件中, 要加this, 所以总结: 在上面api使用中, 如果video在pages页面中, wxcreateVideoContext参数只写id没有问题, 但是当video在自定义组件中, 要必须加this, 才能正确返回VideoContext对象;
（1）HTML页面视频标签大体如下
<video id="video"controls="controls">
<source src="/video/2mp4" type="video/mp4" />
</video>
（2）视频加载后获取视频的长度
varelevideo = documentgetElementById("video");
elevideoaddEventListener('loadedmetadata', function () {//加载数据
//视频的总长度 consolelog(elevideoduration);
});
（3）视频开始播放
varelevideo = documentgetElementById("video");
elevideoaddEventListener('play', function () {//播放开始执行的函数
consolelog("开始播放");
});
（4） 视频正在播放中
varelevideo = documentgetElementById("video");
elevideoaddEventListener('playing', function () {//播放中consolelog("播放中");
});
（5）视频加载中
varelevideo = documentgetElementById("video");
elevideoaddEventListener('waiting', function () {//加载
consolelog("加载中");
});
（6）视频暂停播放
varelevideo = documentgetElementById("video");
elevideoaddEventListener('pause', function () {//暂停开始执行的函数
consolelog("暂停播放");
});
（7）视频结束播放
varelevideo = documentgetElementById("video");
elevideoaddEventListener('ended', function () {//结束
consolelog("播放结束");
}, false);
${ } 这个不太清楚是什么写法可能是某些框架或插件里面的
$(this)attr('data-video-src') 这个意思是获取 this对象的属性（data-video-src）的值。
` ` 这个写法应该是es6里面的吧 没怎么接触过，也不太了解。
至于报错问题，可以尝试只留 $(this)attr('data-video-src') ， 把其他的两侧是的去掉试试。
由于安全机制，IE7+和火狐等浏览器不支持显示本地，你用IE6或者是360浏览器，或者遨游等有些浏览器或许可以显示串本地。你用<img src="本地路径" />是否是在<input type="file"/>的值改变的时候查看效果？
很多网站采取的方法都是直接上传，然后直接<img src="网络路径" />查看。
也可以下载插件，网上有很多。自己写代码的话就麻烦了不少。不同的浏览器有不同的解决办法。
html5 的video标签有一个属性
loop：循环播放
加上去就可以循环播放了
Mediaended; //是否结束
判断之后加上jQuery的fadeIn（淡入）、fadeOut（淡出）切换文字
<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbbmp4" type="video/mp4">
<source src="/example/html5/mov_bbbogg" type="video/ogg">
Your browser does not support HTML5 video
</video>
<script>
myVid=documentgetElementById("video1");
//当前播放进度
myVidontimeupdate=function(){
consolelog(thiscurrentTime);
};
//用户已经拖动进度条
myVidonseeked=function(){
consolelog(2);
return false;
}
//用户正在拖动进度条
myVidonseeking=function(){
consolelog(3);
return false;
}
</script>
</body>
</html>
以上就是关于微信小程序多个视频组件同时播放全部的内容，包括:微信小程序多个视频组件同时播放、JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理、js中,`${$(this).attr('data-video-src')}`);中的``是什么意思为什么会报错等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）