메시지 표시 <video>이 완료되면

Question

이 답변을 얻었지만 몇 시간 동안 검색했을 때 jquery가 작동하지 않으면 찾을 수 없으며 실제로 바인드 방법이나 작동 방식을 이해하지 못합니다.

메시지가 끝나면 내 비디오 만 표시하면됩니다. 어떤 이유로 든 video.ended를 사용하려고하면 true 또는 false 대신 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> 

자바 스크립트 :

대신 동영상의 상태를 확인이 끝날 때 알 수 있도록 ended 이벤트를 수신 할 setInterval를 사용

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; 
} 

Answer 1

. 다음은 변경 코드는 내가 사용하는 것입니다 : 그것은 아마 당신의 설정에 영향을주지 않습니다 동안

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를 사용하는 것이 더 유용 할 수 있습니다.

참고 : 대신 확인하여 setInterval을 사용

• https://developer.mozilla.org/en-US/docs/DOM/Media_events
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener