HTML 參考手冊

HTML 標(biāo)簽大全

HTML 音頻/視頻 DOM ended 事件

如果playback或者streaming達到了媒體的未尾或者沒有更多可用的數(shù)據(jù)，將會引發(fā)一個ended事件。

在線示例

音頻播放完成后彈出提示信息:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 ended 事件使用-菜鳥教程(cainiaoplus.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>

測試看看 ?/?

定義和用法

當(dāng)音頻/視頻到達末尾時，將發(fā)生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() 方法。

技術(shù)細(xì)節(jié)

支持的 HTML 標(biāo)簽:	<audio> 和 <video>
支持的JavaScript對象：	Audio, Video

在線示例

視頻播放完成后彈出提示信息：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 音頻/視頻 ended 事件使用-菜鳥教程(cainiaoplus.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 標(biāo)簽。
</video>
<script>
var vid = document.getElementById("myVideo");
vid.onended = function() 
{
    alert("視頻已播放完成");
};
</script>
</body>
</html>

測試看看 ?/?

HTML 音頻/視頻 DOM 參考手冊

HTML: <template> 標(biāo)簽