video.js 一个页面同时播放多个视频

时间:2022-12-10 11:49:17
$(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 一个页面同时播放多个视频的更多相关文章

  1. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  2. JS 一个页面关闭多个页面

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  3. 使用 video&period;js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  4. video&period;js使用教程API

    videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3. ...

  5. Video&period;js 简单的使用介绍

    vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.下面来介绍下它的使用: 引用video-js.cs样式文件和 ...

  6. html页面引用video&period;js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

  7. 微信 vue中使用video&period;js播放m3u8视频,解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  8. 前端视频直播技术总结及video&period;js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  9. 使用video&period;js 7在html中播放rtmp视频流

    1.背景 最近要做摄像头视频的展示,不想使用硬件方的专用插件,所以计划视频推送到SRS服务器,浏览器再通过rtmp协议显示,类似于直播. 经查询,了解到可以用ckplayer(有许可条款)和video ...

随机推荐

  1. windows查看进程

    由端口到进程: 直接查看进程: 查看本机连接端口: 杀进程:  (eg:kill httpd) tskill  1596

  2. Becoming a Data Scientist – Curriculum via Metromap

    From: http://nirvacana.com/thoughts/becoming-a-data-scientist/ Data Science, Machine Learning, Big D ...

  3. HDU4859 海岸线(最小割)

    题目大概就是说一个n*m的地图,地图上每一块是陆地或浅海域或深海域,可以填充若干个浅海域使其变为陆地,问能得到的最长的陆地海岸线是多少. 也是很有意思的一道题. 一开始想歪了,想着,不考虑海岸线重合的 ...

  4. 通过获取DNS解析的未转义主机名,区分测试环境和正式环境代码

    ASP.Net编程中经常有一些代码,测试环境下需要执行,而正式环境下不需要执行(或者反之). 我们经常做的方式是:去掉注释,测试,再注释,再编译上传(或者反之). 现在,不妨试试以下办法: Reque ...

  5. ThinkPHP学习笔记 实例化模型的四种方法

    创建Action类   [php]   <?php   class NewObjectAction extends Action{       public function index(){ ...

  6. Myeclipse2014破解激活

    eclipse使用的很顺手了,但是为了提高学习的效率(Myeclipse创建web项目的时候可以自动生成一些配置文件),在JSP和servlet的学习阶段,我选择使用Myeclipse,这个问题困扰了 ...

  7. Qt模拟C&num;的File类对文件进行操作

    其实只是QT菜鸟为了练习而搞出来的 文件头: #include <QFile> #include <QString> #include <iostream> #in ...

  8. 关于打开Eclipse时出现eclipse failed to create the java virtual machine与locking is not possible in the directory问题的解决

    今天在机子上使用Eclipse时候打开发现这两个问题,通过查阅资料膜拜大神博客得知解决方法,特此整理下来,方便后来遇到此问题的小伙伴们. 一开始打开Eclipse时候出现问题现象1,问题1解决以后就出 ...

  9. 【QT相关】QT&plus;opencv环境配置

    在qt msvc2010版软件中使用opencv2.4.9进行库函数配置.仅适用于windows下. INCLUDEPATH += $$PWD/../../../opencv/build/includ ...

  10. java线程(三)

    线程代码同步与线程锁 为什么要有同步代码块? 线程同步的出现是为了解决多个线程对统一资源操作而引发的数据混乱问题.这里引用一个经典demo-银行转账操作,场景如下,小明的账户目前有1000人民币,他在 ...