具体代码如下所述:

$(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 myP  = videojs(\'example_video_\' + item.id);
        videojs(\'example_video_\' + item.id).ready(function() {
          var myP  = this;
          myP .play();
        });
      }, 5000);
    });

引入video.css 和video.js 为前提

调用主要是

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

需要做个延时,避免加载失败

总结

以上所述是小编给大家介绍的video.js 一个页面同时播放多个视频的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

收藏 打印