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 Ajax.ashx 高效分页实现代码
Oct 20 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
python SMTP实现发送带附件电子邮件
2018/05/22 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python变量类型知识点总结
2019/02/18 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
2014年计生协会工作总结
2014/11/21 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android