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 相关文章推荐
js 获取input点选按钮的值的方法
Apr 14 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
js实现多个标题吸顶效果
Jan 08 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python线程的几种创建方式详解
2019/08/29 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
阳光体育活动方案
2014/02/16 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
应用数学专业求职信
2014/03/14 职场文书
教职工代表大会主持词
2014/04/01 职场文书
目标责任书范本
2014/04/16 职场文书
公司授权委托书样本
2014/09/15 职场文书
涨价通知怎么写
2015/04/23 职场文书
节约用电倡议书
2015/04/28 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
Android Rxjava3 使用场景详解
2022/04/07 Java/Android