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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
Javascript 继承实现例子
Aug 12 Javascript
动态表格Table类的实现
Aug 26 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
smarty简单入门实例
2014/11/28 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
便捷提取python导入包的属性方法
2018/10/15 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
自主招生自荐书
2013/11/29 职场文书
发展部经理职责规定
2014/02/22 职场文书
离职报告格式
2014/11/04 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server