English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
An ended event will be triggered if playback or streaming reaches the end of the media or there is no more available data.
HTML Audio/Video DOM Reference Manual
A prompt message will pop up after the audio playback is complete:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the video ended event-Basic Tutorial(oldtoolbag.com)<//title>
</head>
<body>
<p>Press the play button and wait for the audio to play complete</p>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var aud = document.getElementById("myAudio");
aud.onended = function()
{
alert("The audio has been played to completion");
};
</script>
</body>
</html>Test to see ‹/›When the audio/The end event will occur when the video reaches the end.
This event is very useful for messages like 'Thank you for listening', 'Thank you for watching', etc.
IEFirefoxOperaChromeSafari
In HTML:
<audio|video onended="myScript">Test it out
In JavaScript:
audio|video.onended=function(){myScript};Test it out
In JavaScript, use the addEventListener() method:
audio|video.addEventListener("ended", myScript);Test it out
Note: Internet Explorer 8 and earlier versions of IE browsers do not support addEventListener() Methods.
Technical Details| Supported HTML tags: | <audio> and <video> |
|---|---|
| Supported JavaScript objects: | Audio, Video |
A prompt message will pop up after the video playback is complete:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the video ended event-Basic Tutorial(oldtoolbag.com)<//title>
</head>
<body>
<p>Press the play button and wait for the video to finish playing.</p>
<video id="myVideo" width="320" height="176" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 video tag.
</video>
<script>
var vid = document.getElementById("myVideo");
vid.onended = function()
{
alert("Video has finished playing");
};
</script>
</body>
</html>Test to see ‹/›