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操纵Cookie实现购物车程序
Feb 15 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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 函数使用可变数量的参数方法
2017/05/02 PHP
PHP实现的日历功能示例
2018/09/01 PHP
接收键盘指令的脚本
2006/06/26 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
js中的this关键字详解
2013/09/25 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python处理文本文件并生成指定格式的文件
2014/07/31 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
深入理解Django的中间件middleware
2018/03/14 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python 实现识别图片上的数字
2019/07/30 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
设计专业毕业生求职信
2014/06/25 职场文书
先进员工事迹材料
2014/12/20 职场文书
入党个人总结范文
2015/03/02 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
学校隐患排查制度
2015/08/05 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers