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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
通过JS深度判断两个对象字段相同
Jun 14 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
一个数据采集类
2007/02/14 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Python set集合类型操作总结
2014/11/07 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
机电工程专业应届生求职信
2013/10/03 职场文书
承办会议欢迎词
2014/01/17 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
2019教师的学习计划
2019/06/25 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Spring 使用注解开发
2022/05/20 Java/Android
python 使用pandas读取csv文件的方法
2022/12/24 Python