Отображается сообщение, когда <video> завершено

-1

Возможно, на это можно было ответить раньше, но я искал часы и не могу найти что-либо без jquery, чтобы заставить это работать, и я действительно не понимаю метод привязки или как это работает.Отображается сообщение, когда <video> завершено

Мне просто нужно мое видео, чтобы отобразить сообщение после его завершения. По какой-то причине каждый раз, когда я пытаюсь использовать 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; 
}

источник

2013-04-27 RiCHiE

Вместо использования setInterval, чтобы проверить, просто использовать "onended" событие, чтобы знать, когда он заканчивается. – Ian

Наконец получил его на работу с помощью: \t \t video.onended = функция (е) { \t \t \t message.innerHTML =; "Наконец-END!" \t \t \t \t} – RiCHiE

Рад, что у вас это работает; Я добавил ответ с этим предложением и как его настроить – Ian

Вместо использования 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> завершено

ответ

Смежные вопросы