Question

我知道如果我只是使用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：我发现上面的代码只能运行一次。（它被称为＆＃39;毕竟。在我的特殊情况下，我需要能够多次这样做。

我做了一个小改动，那就是使用 video.on（＆＃39;结束＆＃39;，myfunction）而不是 video.one（＆＃39;结束＆＃39;，myFunction）。现在我可以根据需要多次调用它。

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

＆＃34;的addEvent＆＃34;和＆＃34; removeEvent＆＃34;被＆＃34;替换为＃34;和＆＃34;关＆＃34; 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();
            })
        };

Answer 1

对于读者：asker正在使用一个名为videojs的库，它包含本机JS-＆lt; video＆gt;接口。其中，它提供了事件功能：on，off，one。

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

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

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

在html5视频结束后切换源

1 个答案: