Question

有没有办法用video.js创建播放列表？目前我正在使用webm视频作为背景，而我想要实现的是在第一次结束后添加另一个视频。最好的结果是让他们在无限循环中进行游戏。

这是我现在拥有的视频标签：

<video id="video" class="video-js vjs-default-skin"
autoplay preload muted width="1080" height="568"
<source src="wp-content/themes/myTheme/video/video1.webm" type='video/webm'/>
</video>

这是我想在第一个之后播放的视频：

<video id="video" class="video-js vjs-default-skin"
autoplay preload muted width="1080" height="568"
<source src="wp-content/themes/myTheme/video/video2.webm" type='video/webm'/>
</video>

Answer 1

你可以做类似的事情。这将收听第一个视频的end事件，并更改src并播放第二个视频。

＆＃13;

// Check whether the video has ended, and if so change the src to the next one.
$('video').on('ended', function() {
  $('video source').attr('src', "wp-content/themes/myTheme/video/video2.webm");
  $("video")[0].load();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="video" class="video-js vjs-default-skin" autoplay preload muted width="600" height="300"> <source src="wp-content/themes/myTheme/video/video1.webm" type='video/webm' />
</video>

＆＃13;

Answer 2

我知道这个问题已经问了很久了，希望对您有所帮助您所需要做的就是以下

                videojs('my-video').on('ended', function() {

                      var player = videojs('my-video'); //could replace with "this" but just so it is clear to everyone
                      player.pause();
                      var new_url = "newideourl"
                      player.src(new_url);
                      player.load();
                      player.play();

                    });

如何创建video.js播放列表

2 个答案: