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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
javascript demo 基本技巧
Dec 18 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
javascript 面向对象 function类
May 13 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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输出缓存ob系列函数详解
2014/03/11 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
高中军训广播稿
2014/01/14 职场文书
学校岗位设置方案
2014/01/16 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2014年英语工作总结
2014/12/20 职场文书
财务人员个人工作总结
2015/02/27 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
python tkinter Entry控件的焦点移动操作
2021/05/22 Python