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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
微信小程序单选框自定义赋值
May 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面对对象编程的多态
2015/08/12 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python中six模块基础用法
2019/12/08 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
python 解决函数返回return的问题
2020/12/05 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
精彩的推荐信范文
2013/11/26 职场文书
门卫岗位安全职责
2013/12/13 职场文书
座谈会主持词
2014/03/20 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
应届生简历自我评价
2015/03/11 职场文书
孔子观后感
2015/06/08 职场文书
解除合同协议书范本
2016/03/21 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python