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的deferred对象使用详解
Aug 20 Javascript
js实现两点之间画线的方法
May 12 Javascript
JavaScript知识点整理
Dec 09 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS实现省市县三级下拉联动
Apr 10 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 分页分组类
2009/12/10 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
js中时间格式化的几种方法
2018/07/22 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Django实现内容缓存实例方法
2020/06/30 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Python爬取某平台短视频的方法
2021/02/08 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
中学生操行评语大全
2014/04/24 职场文书
2014年人事科工作总结
2014/11/19 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
保护动物的宣传语
2015/07/13 职场文书