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