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图片平滑连续滚动插件
Apr 27 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Vue实现简易翻页效果源码分享
Nov 08 Javascript
js实现下拉框二级联动
Dec 04 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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学习之运算符相关概念
2011/06/09 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
js查找父节点的简单方法
2008/06/28 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue项目路由刷新的实现代码
2019/04/17 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python 对字典按照value进行排序的方法
2019/05/09 Python
python的faker库用法
2019/11/28 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
高中化学教学反思
2014/01/13 职场文书
单位收入证明范本
2015/06/18 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript