當<video>完成時顯示消息

-1

這可能已經回答了，但我已經搜索了幾個小時，沒有jquery找不到任何東西來獲得這個工作，我真的不明白綁定方法或如何工作。當<video>完成時顯示消息

我只需要我的視頻在完成後顯示一條消息。由於某種原因，任何時候我嘗試使用video.ended我得回null而不是真或假。也不知道爲什麼我的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; 
}

來源

2013-04-27 RiCHiE

而不是使用setInterval的檢查，只需使用「onended」事件知道何時結束。 – Ian 2013-04-27 04:54:18

終於得到它使用的工作： \t \t video.onended =功能（E）{ \t \t \t message.innerHTML =; 「終於結束了！」 \t \t \t \t} – RiCHiE 2013-04-27 05:27:32

很高興你的工作;我添加了這個建議的答案，以及我如何設置它 – Ian 2013-05-17 16:52:31

而不是使用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-27 18:04:49 Ian

當<video>完成時顯示消息

回答

相關問題