<video> 结束时显示消息答案

【问题标题】：Display Message when <video> is finished<video> 结束时显示消息
【发布时间】：2013-04-27 04:33:36
【问题描述】：

这可能之前已经回答过了，但我已经搜索了几个小时，没有 jquery 就找不到任何东西，我并不真正了解绑定方法或它是如何工作的。

我只需要我的视频在完成后显示一条消息。出于某种原因，任何时候我尝试使用 video.ended 我都会返回 null 而不是 true 或 false。也不知道为什么我的 setInterval 显然是错误的。

HTML：

<video id="videoAllUrBase" poster="images/all-ur-base-poster.png">
    <source src="video/All Your Base Are Belong To Us.mp4" />
    <source src="video/All Your Base Are Belong To Us.mp4.ogg" />
    <source src="video/All Your Base Are Belong To Us.mp4.webm" />
    <p>Your browsers does not support video</p>
</video>
<br></br>
<input id="playButton" type="button" onclick="playVideo();" value="Play" />
<input id="skipButton" type="button" onclick="skip(10);" value="Skip" />
<input id="rewButton" type="button" onclick="skip(-10);" value="Rewind" />
<p id="vidMessage">Click the Play button to start the video.</p>

JavaScript：

function playVideo(){
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');
    var button = document.getElementById('playButton');

    if(video.paused){
        video.play();
        button.value = "Pause";
        message.innerHTML = "The video is playing, click the Pause button to pause the video.";
    } else {    
        video.pause();
        button.value = "Play";
        message.innerHTML = "The video is paused, click the Play button to resume the video.";
    } 

}

function checkEnd{
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');

    if(video.ended){
        message.innerHTML = "The video has ended, click Play to restart the video.";
    }
}

setInterval(checkEnd, 1000);

function skip(value) {
    var video = document.getElementById("videoAllUrBase");
    video.currentTime += value;
}

【问题讨论】：

不用setInterval去检查，只用“onended”事件就知道什么时候结束了。
终于让它工作了：video.onended = function(e) { message.innerHTML = "FINALLY THE END!"; }
很高兴你让它工作了；我添加了一个包含该建议的答案以及我将如何设置它

标签： javascript html5-video

【解决方案1】：

不要使用setInterval 来检查视频的状态，而是监听ended 事件以了解它何时结束。这是您的代码以及我将使用的更改：

function playVideo() {
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');
    var button = document.getElementById('playButton');

    if (video.paused) {
        video.play();
        button.value = "Pause";
        message.innerHTML = "The video is playing, click the Pause button to pause the video.";
    } else {    
        video.pause();
        button.value = "Play";
        message.innerHTML = "The video is paused, click the Play button to resume the video.";
    }

    video.onended = videoEnded;
}

function videoEnded() {
    var video = document.getElementById('videoAllUrBase');
    var message = document.getElementById('vidMessage');
    message.innerHTML = "The video has ended, click Play to restart the video.";
}

function skip(value) {
    var video = document.getElementById("videoAllUrBase");
    video.currentTime += value;
}

虽然它可能不会影响您的设置，但使用addEventListener 绑定事件可能更有用。

参考资料：

【讨论】：