video.js 一个页面同时播放多个视频

时间:2024-03-02 20:08:26
$(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);
需要做个延时,避免加载失败