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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
js前端导出Excel的方法
Nov 01 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
JS中async/await实现异步调用的方法
Aug 28 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中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
Script的加载方法小结
2011/01/12 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
jQuery实现视频展示效果
2020/05/30 jQuery
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python函数局部变量用法实例分析
2015/08/04 Python
python 性能提升的几种方法
2016/07/15 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
专业实习自我鉴定
2013/10/29 职场文书
质检部经理岗位职责
2014/02/19 职场文书
给公司的建议书范文
2014/05/13 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
环保守法证明
2015/06/24 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
vue使用echarts实现折线图
2022/03/21 Vue.js
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android