Question

在我目前正在进行的项目中，我有一个VideoJS播放器，我想更改视频结束时的来源。
使用VideoJS API，我可以获得一个Javascript脚本，以便在玩家已经到达＆＃39;结束时运行。状态，但我无法在他们的文档或StackOverflow中找到任何代码来解释如何执行此操作。

HTML

<video
id="my_video_1"
style="display:block;"
class="video-js vjs-default-skin vjs-nofull vjs-big-play-centered"
controls autoplay preload="none"
width="800px"
poster='res/img/poster.jpg'
data-setup='{ "fluid": true, "sources": [{ "type": "video/mp4", "src": "res/vid/vid1.mp4"}] }'
>
</video>

当视频结束时，有没有办法动态地将src更改为新文件？

Answer 1

VideoJS的API为'player.on'，然后是所需的监听器 - 在这种情况下，（'已结束'）。我倒下的地方是我试图使用document.GetElementByID并以这种方式更新src。

通过将HTML中的VideoJS代码更改为上面的样式，我能够运行以下侦听事件来更新结束时的src并加载新视频。

我的下一个问题是视频正在循环播放。当视频结束时，无限地调用相同的功能为了解决这个问题，我添加了一个布尔值'executed'，它在第一次播放时变为True。

<script>
    var video = videojs('my_video_1').ready(function(){
      var player = this;
      var executed = false;
      player.on('ended', function() {
        if (!executed) {
        player.src({"type":"video/mp4", "src":"res/vid/vid2.mp4"});
        player.play(); 
        executed = true 
        }
      });
    });
</script>

现在播放第一个视频，然后是第一个视频，第一个视频完成后没有任何用户交互。

我希望这可以帮助其他可能遇到类似问题的人。

当VideoJS MP4结束时自动加载新视频

1 个答案: