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 引发两次$(document.ready)事件
Jan 15 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 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更新mysql后获取改变行数的方法
2014/12/25 PHP
分享php分页的功能模块
2015/06/16 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
Django异步任务之Celery的基本使用
2019/03/23 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
scrapy-splash简单使用详解
2021/02/21 Python
高级运动鞋:GREATS
2019/07/19 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
办公室文书岗位职责
2013/12/16 职场文书
五年级科学教学反思
2014/02/05 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
vue+element ui实现锚点定位
2021/06/29 Vue.js
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫