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