Ended事件 | HTML音频/视频

由 hcduguo

定义与用法

ended 事件在音频/视频(audio/video)播放完成后触发。

该事件通常用于提示播放完成的信息，例如 “谢谢收听”, “谢谢观看” 等。

语法格式

HTML 中：

<audio|video onended=”myScript“>

JavaScript 中：

audio|video.onended=function(){myScript};

使用 addEventListener() 方法:

audio|video.addEventListener(“ended”, myScript);

提示： Internet Explorer 8 及更早 IE 版本的浏览器不支持 addEventListener() 方法。

示例代码

HTML效果：
<audio controls onended="alert('音频已播放完成')">
  <source src="/audio/claps.ogg" type="audio/ogg">
  <source src="/audio/claps.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

效果展示：

按下播放按钮等待音频播放完成。

亲自试试

JavaScript效果：
<script>
    var aud = document.getElementById("myAudio");
    aud.onended = function() {
        alert("音频已播放完成");
    };
</script>

效果展示：


按下播放按钮等待音频播放完成

亲自试试

使用 addEventListener() 方法效果:
script>
    var aud = document.getElementById("myAudio");
    aud.addEventListener("ended",
    function() {
        alert("音频已播放完成");
    });
</script>

按下播放按钮等待音频播放完成。

亲自试试

本文底部包含了更多示例。

浏览器支持

事件
EndedYes9.0YesYesYes

表格中的数字表示支持该事件的第一个浏览器的版本号。

技术细节

支持的 HTML 标签:<audio> 和 <video>
支持的JavaScript对象：Audio, Video

更多示例

<script>
    var vid = document.getElementById("myVideo");
    vid.onended = function() {
        alert("视频已播放完成");
    };
</script>

按下播放按钮等待视频播放完成。

亲自试试

相关