video.js 一个页面同时播放多个视频的实例代码
更新时间：2018年11月27日 16:15:23 作者：小角色Byme
这篇文章主要介绍了video.js 一个页面同时播放多个视频的实例代码 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
具体代码如下所述：
$(data).each(function(i, item) {
// innerHTML += '<li type-id="'+item.id+'">'+
// '<img src="'+(item.imgs?item.imgs:'../../img/videoBg1.jpg')+'" alt="">'+
// '<p>'+item.name+'</p>'+
// '</li>';
innerHTML += '<li type-id="' + item.id + '">' +
// '<img src="'+(item.imgs?item.imgs:'../../img/videoBg1.jpg')+'" alt="">'+
'<video style="width:100%;height:100%;" id="example_video_' + item.id + '" class="videoClass video-js vjs-default-skin vjs-big-play-centered" autoplay="autoplay" controls muted><source src="' + item.hls + '" type="application/x-mpegURL">' +
'</video>' +
'<p>' + item.name + '</p>' +
'</li>';
//视频实时播放
setTimeout(function() {
var myPlayer = videojs('example_video_' + item.id);
videojs('example_video_' + item.id).ready(function() {
var myPlayer = this;
myPlayer.play();
});
}, 5000);
});
引入video.css 和video.js 为前提
调用主要是
setTimeout(function() {
var myPlayer = videojs('example_video_' + item.id);
videojs('example_video_' + item.id).ready(function() {
var myPlayer = this;
myPlayer.play();
});
}, 5000);
需要做个延时，避免加载失败
总结
以上所述是小编给大家介绍的video.js 一个页面同时播放多个视频的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
JavaScript使用indexOf()实现数组去重的方法分析
这篇文章主要介绍了JavaScript使用indexOf()实现数组去重的方法,结合实例形式分析了使用indexOf()方法进行数组的判断与去重相关原理与具体操作技巧,需要的朋友可以参考下2018-09-09
console.log 不支持ie，下面的代码需要在火狐中测试，不然会有问题。2010-12-12
这篇文章主要为大家详细介绍了微信小程序如何使用云开发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
下面小编就为大家带来一篇JavaScript几种数组去掉重复值的方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2016-04-04
这篇文章主要介绍了原生javascript实现图片按钮切换,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JavaScript模块随意拖动的具体实现,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了用原生JS实现简单的多选框功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
这篇文章主要介绍了Javascript实现鼠标框选操作,不是点击选取,利用鼠标进行框选，感兴趣的小伙伴们可以参考一下2016-04-04
模态框（Modal）是覆盖在父窗体上的子窗体。下面通过本文给大家介绍Bootstrap 模态框（Modal）带参数传值实例代码，需要的朋友参考下吧2017-08-08
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
这篇文章主要介绍了通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
最新评论