📌  相关文章
📜  HTML | DOM oncanplay 事件(1)

📅  最后修改于: 2023-12-03 15:15:35.392000             🧑  作者: Mango

HTML | DOM oncanplay 事件

oncanplay 事件在媒体（比如音频或视频）可以播放时触发。

在以下情况下会触发 oncanplay 事件：

  • 当媒体文件已经缓存并可以播放时
  • 当浏览器能够首次渲染媒体文件时
  • 当媒体文件能够从当前位置播放时

语法

通过 HTML DOM，可以把一个函数指定给 oncanplay 事件来执行，或者通过 addEventListener 方法为该元素添加 canplay 事件：

document.getElementById("myAudio").oncanplay = function() {
  // 执行某些代码
};

document.getElementById("myAudio").addEventListener("canplay", function() {
  // 执行某些代码
});

实例

以下是一个简单的实例，当音频文件加载完成并准备好播放时，将弹出一条提示消息：

<!DOCTYPE html>
<html>
<head>
  <title>oncanplay 事件</title>
</head>
<body>
  <audio id="myAudio" controls>
    <source src="https://www.runoob.com/try/demo_source/horse.ogg" type="audio/ogg">
    <source src="https://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>

  <script>
    var x = document.getElementById("myAudio");
    x.oncanplay = function() {
      alert("该音频准备好播放了");
    };
  </script>
</body>
</html>

通过以上代码，当音频文件加载完成并准备好播放时，就会弹出一条提示消息。

参考链接