-1

这可能之前已经回答过了，但是我已经搜索了几个小时，没有 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;
}
4

1 回答 1

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绑定事件可能更有用。

参考：

于 2013-04-27T18:04:49.823 回答