video.js 一個頁面同時播放多個視訊

abcByme發表於2018-11-27
IDEJS
$(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);
需要做個延時，避免載入失敗

相關文章