video.js 一個頁面同時播放多個視頻的實例代碼

這篇文章主要介紹了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 爲前提

調用主要是

setTimeout(function() {
        var myPlayer = videojs('example_video_' + item.id);
        videojs('example_video_' + item.id).ready(function() {
          var myPlayer = this;
          myPlayer.play();
        });
      }, 5000);

需要做個延時，避免加載失敗

總結

以上所述是小編給大家介紹的video.js 一個頁面同時播放多個視頻的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！