$(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.js 开发 HTML5 视频页面

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

  4. video.js使用教程API

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

  5. Video.js 简单的使用介绍

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

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

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

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

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

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

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

  9. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

随机推荐

  1. [Swift]LeetCode1033. 移动石子直到连续 | Moving Stones Until Consecutive

    Three stones are on a number line at positions a, b, and c. Each turn, let's say the stones are curr ...

  2. asp.net core系列 47 Identity 自定义用户数据

    一.概述 接着上篇的WebAppIdentityDemo项目,将自定义用户数据添加到Identity DB,自定义扩展的用户数据类应继承IdentityUser类, 文件名为Areas / Ident ...

  3. 安全性测试入门:DVWA系列研究(一):Brute Force暴力破解攻击和防御

    写在篇头: 随着国内的互联网产业日臻成熟,软件质量的要求越来越高,对测试团队和测试工程师提出了种种新的挑战. 传统的行业现象是90%的测试工程师被堆积在基本的功能.系统.黑盒测试,但是随着软件测试整体 ...

  4. 前端笔记之CSS(下)浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  5. grep 及正则表达式

    grpe 及正则表达式 文本查找的需要:grep,egrep,fgrepgrep: 根据模式,搜索文本,并将符合模式的文本行显示出来.Pattern : 文本字符以及正则表达式的元字符组合而成的匹配条 ...

  6. Windows系统桌面右击反应变慢、卡顿问题解决方法

    博主的电脑是Win10系统,在修改完系统的用户文件夹名后,桌面右击出现了反应卡顿的现象,并且点击输入法,也变得卡顿.问题解决后,于是想简单记录一下. 还是注册表的问题,使用Win+R快捷键,打开运行, ...

  7. gittalk报错Error

    最近通过github和jekyll搭了一个博客,申请使用了gittalk的评论. 但是博客的页面一直报Error:Not found,如下 发现是gittalk中的信息填写错了,name随便写:Hom ...

  8. js生成[n,m]的随机数,js如何生成随机数,javascript随机数Math.random()

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

  9. 【安富莱TCPnet网络教程】HTTP通信实例

    第41章      HTTP超文本传输协议基础知识 本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习. ...

  10. Mysql查询的一些操作(查表名,查字段名,查当月,查一周,查当天)

    查询数据库中所有表名 select table_name from information_schema.tables where table_schema='tools' and table_typ ...