HTML 참조 매뉴얼

HTML 태그大全

HTML 오디오/비디오 DOM ended 이벤트

playback이나 streaming이 미디어의 끝에 도달하거나 더 이상 사용할 수 있는 데이터가 없을 때, ended 이벤트가 발생합니다.

온라인 예제

音频 재생이 완료되면 표시되는 알림 메시지:

예제

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML 오디오/video ended 이벤트 사용-기본 가이드(oldtoolbag.com)</title>
</head>
<body>
<p>재생 버튼을 눌러音频 재생이 완료될 때까지 기다리기</p>
<audio　id="myAudio"　controls>
　　<source　src="horse.ogg"　type="audio/ogg">
　　<source　src="horse.mp3"　type="audio/mpeg">
　　브라우저는 audio 요소를 지원하지 않습니다。
</audio>
<script>
var　aud　=　document.getElementById("myAudio");
aud.onended　=　function()　
{
　　　　alert("오디오 재생이 완료되었습니다");
};
</script>
</body>
</html>

테스트를 보세요 ‹/›

정의와 사용법

오디오가/비디오가 끝에 도달할 때, end 이벤트가 발생합니다.
이 이벤트는 "감사합니다 들었음", "감사합니다 시청함"과 같은 메시지에 매우 유용합니다.

브라우저 호환성

IEFirefoxOperaChromeSafari

문법

HTML에서:

<audio|video onended="myScript">테스트해 보세요

JavaScript에서:

audio|video.onended=function(){myScript};테스트해 보세요

JavaScript에서, addEventListener() 메서드를 사용하여:

audio|video.addEventListener("ended", myScript);테스트해 보세요

주의: Internet Explorer 8 및 이전 IE 버전의 브라우저는 지원하지 않습니다 addEventListener() 메서드.

기술 세부 사항

지원되는 HTML 태그:	<audio> 및 <video>
지원되는 JavaScript 객체:	오디오, 비디오

온라인 예제

비디오 재생이 완료되면 표시되는 알림 메시지:

예제

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML 오디오/video ended 이벤트 사용-기본 가이드(oldtoolbag.com)</title>
</head>
<body>
<p>재생 버튼을 눌러 비디오 재생이 완료될 때까지 기다리세요.</p>
<video id="myVideo" width="320" height="176" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　您的浏览器不支持　HTML5　video 태그.
</video>
<script>
var　vid　=　document.getElementById("myVideo");
vid.onended　=　function()　
{
　　　　alert("비디오가 재생되었습니다.");
};
</script>
</body>
</html>

테스트를 보세요 ‹/›

HTML 오디오/비디오 DOM 참조 가이드

HTML: <template> 태그