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实现table单双行不同显示并能单行选中
Jul 25 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
JS闭包经典实例详解
Dec 20 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
vue实现购物车的监听
Apr 20 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
关于Vue中$refs的探索浅析
Nov 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小偷的核心程序
2007/04/09 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
python实现人人网登录示例分享
2014/01/19 Python
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python中关键字is与==的区别简述
2014/07/31 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
python 带时区的日期格式化操作
2020/10/23 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
大学毕业登记表自我鉴定
2013/10/09 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
服务生自我鉴定
2014/01/22 职场文书
购房意向书范本
2014/04/01 职场文书
自强之星事迹材料
2014/05/12 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js