답변:
첫 번째 매개 변수로 'ended'가있는 이벤트 리스너를 추가 할 수 있습니다
이처럼 :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>if(!e) { e = window.event; }이 답변에 원래 포함되었다는 진술은 IE의 attachEvent초기 버전에 첨부 된 이벤트 핸들러 내에서 최신 이벤트를 가져 오기위한 IE 특정 코드입니다 . 이 경우 처리기가 첨부되어 있기 때문에 addEventListener(그리고 IE의 초기 버전은 HTML5 비디오를 다루는 사람들과 관련이 없으므로) 완전히 불필요하며 제거했습니다.
HTML5 비디오 및 오디오에 대해 알아야 할 모든 것을 살펴보십시오.Opera Dev 사이트의 "내 컨트롤을 롤링하고 싶다"섹션에서 .
이것은 관련 섹션입니다 :
<video src="video.ogv">
video not supported
</video>다음을 사용할 수 있습니다.
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>onended모든 미디어 요소의 HTML5 표준 이벤트입니다. HTML5 미디어 요소 (비디오 / 오디오) 이벤트 설명서를 참조하십시오.
쿼리
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>이벤트 유형 HTML 오디오 및 비디오 DOM 참조
.on()로 선호되었습니다 .bind(). 또한 코드를 올바르게 형식화하십시오.
다음은 전체 예입니다. =) 도움이되기를 바랍니다.
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>다음은 비디오가 끝날 때 트리거되는 간단한 방법입니다.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html> 'EventListener'행에서 'ended'라는 단어를 'pause'또는 'play'로 바꾸어 해당 이벤트도 캡처하십시오.
비디오가 끝날 때 함수가 호출 ended, loadedmetadata, timeupdate되는 위치를 포함하여 모든 비디오 이벤트를 리스너에 추가 할 수 있습니다.ended
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>