video.js 一个页面同时播放多个视频的实例代码


Posted in Javascript onNovember 27, 2018

具体代码如下所述:

$(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 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
Vue数据双向绑定的深入探究
Nov 27 #Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 #Javascript
微信小程序实现日历功能
Nov 27 #Javascript
微信小程序实现打卡日历功能
Sep 21 #Javascript
微信小程序实现时间预约功能
Nov 27 #Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 #Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
机电专业个人自荐信格式模板
2013/09/23 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
优秀班集体申报材料
2014/12/25 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
2015年度女工工作总结
2015/10/22 职场文书
七年级作文之秋游
2019/10/21 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL