javascript - html5视频结束后切换源

我知道如果我只使用onended事件，这应该很简单：

  <video src="video.ogv" id="myVideo">
  </video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

但是，结束事件在我切换曲目后触发了evn。我正在使用videojs播放器。

在这种情况下，我要播放剪辑B，播放完毕后，切换到剪辑C。

这是我的代码：

// clipA is currently playing......
// User hits a button which calls switchVideo();

// video = videojs('video-player');
var switchVideo = function (clipB, clipC) {
    video.src(clipB);
    video.play();

    // When clipB has ended...
    video.ended(function () {
        console.log("clipB ended");
        video.src(clipC);
        video.play();
    })
};

调用此函数的那一刻，我可以看到它跳到clipB片刻，然后触发了onended事件，然后视频提要跳到clipC。如何忽略clipA的第一个onended事件，而只侦听clipB？

更新：这是最终的正确答案：

   // video = videojs('video-player');
    var switchVideo = function (clipB, clipC) {
        video.src(clipB);
        video.play();

        // When clipB has ended...
        video.one('ended', function () {
            console.log("clibB ended");
            video.src(clipC);
            video.play();
        })
    };

更新2：我发现上面的代码将只工作一次。 （毕竟，这被称为“一个”。在我的特殊情况下，我需要能够多次执行此操作。

我做了一个小小的更改，那就是使用video.on（'ended'，myFunction）而不是video.one（'ended'，myFunction）。现在，我可以根据需要多次调用它。

阅读this Stack Overflow答复后，我得出了这个结论。


  “ addEvent”和“ removeEvent”被“ on”和“ off”替换per the videojs API.-@Lyn Headley


最终解决方案：

       // video = videojs('video-player');
        var switchVideo = function (clipB, clipC) {
            video.src(clipB);
            video.play();

            // When clipB has ended...
            video.on('ended', function () {
                console.log("clibB ended");
                video.src(clipC);
                video.play();
            })
        };

最佳答案

对于读者来说：问问者正在使用一个名为videojs的库，该库包含了本机JS- 接口。其中，它提供事件功能：on，off，one。

每次调用switchVideo时，原始代码都会创建一个新的事件侦听器，从而导致多次调用ended回调。

解决方案是使用one('ended')代替ended [相当于on('ended')]：

video.one('ended', function () {
    whatever;
});