实现视频播放完毕之后,才能执行某些事件

最新推荐文章于 2024-12-26 16:33:46 发布

原创最新推荐文章于 2024-12-26 16:33:46 发布 · 6.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#小技术点

本文介绍了一种利用HTML5音频标签的onended事件实现播放结束后显示按钮的方法。通过简单的示例代码展示了如何监听音频播放结束并执行相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天帮忙做着一个学校的平台,需求是要视频播放结束之后才能参加测试,吼吼吼~~~~~~~~~~~~~~

然后就发现了一个了不得的h5新特性\(^o^)/~

h5的媒介标签都有个onended

w3c上是这样写的

然后,我就抱着试一试的态度试了试

demo如下

<!DOCTYPE HTML>
<html>
<style>
    #show{
        display : none;
    }
</style>
<body>

<audio id="audio" controls="true" autoplay="true">

    <source src="1.mp3" type="audio/mpeg">
</audio>
<button id="show">展示按钮</button>
<script>
    var audio = document.getElementById("audio");
    var show = document.getElementById('show');
    audio.loop = false;
    audio.addEventListener('ended', function () {
        show.style.display = 'block',
    }, false);
</script>
</body>
</html>

好用啊,开心,又是充满活力敲代码,做程序媛的一天~~~~~~~~~~~~~