HTML | DOM oncanplaythrough 事件(1)

📌 相关文章

📜 HTML | DOM oncanplaythrough 事件(1)

📅 最后修改于: 2023-12-03 14:41:48.293000 🧑 作者: Mango

HTML | DOM oncanplaythrough 事件

介绍

oncanplaythrough 事件在媒体元素（例如 <audio> 和 <video>）可以在不因缓冲而停止的情况下播放时触发。当媒体资源的可用数据足以播放整个媒体文件时，该事件将被触发。这意味着可以在不中断缓冲的情况下开始播放媒体。

语法

object.oncanplaythrough = function(){};

object ：触发事件的媒体元素对象。
function ：事件发生时执行的函数。

示例

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript 视频事件</h2>
    <video id="myVideo" width="320" height="176">
      <source
        src="https://www.runoob.com/try/demo_source/movie.mp4"
        type="video/mp4"
      >
      <source
        src="https://www.runoob.com/try/demo_source/movie.ogg"
        type="video/ogg"
      >
      您的浏览器不支持 HTML video。
    </video>
    <p>点击播放视频。</p>
    <script>
      var x = document.getElementById("myVideo");

      function canPlay() {
        x.play();
      }

      x.oncanplaythrough = canPlay;
    </script>
  </body>
</html>

解析

上述示例中，oncanplaythrough 事件会在视频资源可以播放时触发 canPlay 函数，该函数将立即开始播放媒体资源。

总结

oncanplaythrough 事件在媒体资源可用数据足以播放整个媒体文件时触发。使用该事件可以在不中断缓冲的情况下开始播放媒体。