video.js 一個(gè)頁(yè)面同時(shí)播放多個(gè)視頻的實(shí)例代碼
更新時(shí)間：2018年11月27日 16:15:23 作者：小角色Byme
這篇文章主要介紹了video.js 一個(gè)頁(yè)面同時(shí)播放多個(gè)視頻的實(shí)例代碼 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
具體代碼如下所述：
$(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>';
//視頻實(shí)時(shí)播放
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 為前提
調(diào)用主要是
setTimeout(function() {
var myPlayer = videojs('example_video_' + item.id);
videojs('example_video_' + item.id).ready(function() {
var myPlayer = this;
myPlayer.play();
});
}, 5000);
需要做個(gè)延時(shí)，避免加載失敗
總結(jié)
以上所述是小編給大家介紹的video.js 一個(gè)頁(yè)面同時(shí)播放多個(gè)視頻的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合實(shí)例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下2018-09-09
javascript數(shù)字?jǐn)?shù)組去重復(fù)項(xiàng)的實(shí)現(xiàn)代碼
console.log 不支持ie，下面的代碼需要在火狐中測(cè)試，不然會(huì)有問題。2010-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序如何使用云開發(fā)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)硪黄狫avaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看2016-04-04
原生javascript實(shí)現(xiàn)圖片按鈕切換
這篇文章主要介紹了原生javascript實(shí)現(xiàn)圖片按鈕切換,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript模塊隨意拖動(dòng)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能
這篇文章主要介紹了用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
Javascript實(shí)現(xiàn)鼠標(biāo)框選操作 不是點(diǎn)擊選取
這篇文章主要介紹了Javascript實(shí)現(xiàn)鼠標(biāo)框選操作,不是點(diǎn)擊選取,利用鼠標(biāo)進(jìn)行框選，感興趣的小伙伴們可以參考一下2016-04-04
Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例
模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。下面通過本文給大家介紹Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例代碼，需要的朋友參考下吧2017-08-08
通過高德地圖API獲得某條道路上的所有坐標(biāo)用于描繪道路的方法
這篇文章主要介紹了通過高德地圖API獲得某條道路上的所有坐標(biāo)用于描繪道路的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08