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 页面执行时间计算代码
Mar 04 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
js传值 判断
2006/10/26 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
javascript控制台详解
2015/06/25 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
士力架广告词
2014/03/20 职场文书
群众路线党课主持词
2014/04/01 职场文书
治庸问责心得体会
2014/09/12 职场文书
2016国培研修心得体会
2016/01/08 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
入党申请书怎么写?
2019/06/21 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技