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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
js模糊查询实例分享
Dec 26 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
video.js添加自定义组件的方法
Dec 09 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
基于文本的留言簿
2006/10/09 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JavaScript 乱码问题
2009/08/06 Javascript
javascript 一些用法小结
2009/09/11 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
js html实现计算器功能
2018/11/13 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python IDLE入门简介
2017/12/08 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python3爬虫学习入门教程
2018/12/11 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
flask开启多线程的具体方法
2020/08/02 Python
初三学生评语大全
2014/04/24 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
MySQL主从切换的超详细步骤
2022/06/28 MySQL