📌  相关文章
📜  HTML onloadedmetadata 属性(1)

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

HTML onloadedmetadata 属性

onloadedmetadata 属性在 HTML 中表示当媒体（例如音频或视频）的元数据加载时应该触发的事件处理程序。

语法
<video onloadedmetadata="myFunction()">...</video>
<audio onloadedmetadata="myFunction()">...</audio>
属性值
  • myFunction()：可以是任何 JavaScript 函数的名称，用于在元数据加载后立即执行的操作。
示例
<!DOCTYPE html>
<html>
  <body>
    <video onloadedmetadata="alert('Metadata loaded.');">
      <source src="myMovie.mp4" type="video/mp4">
      <source src="myMovie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>
  </body>
</html>
访问元数据

你可以使用 onloadedmetadata 属性来访问媒体元数据，例如：视频的宽度和高度。

<!DOCTYPE html>
<html>
  <body>
    <video onloadedmetadata="showVideoMetaData()" id="myVideo">
      <source src="myMovie.mp4" type="video/mp4">
      <source src="myMovie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <script>
      function showVideoMetaData() {
        var video = document.getElementById("myVideo");
        console.log("Video width: " + video.videoWidth);
        console.log("Video height: " + video.videoHeight);
      }
    </script>
  </body>
</html>
总结

onloadedmetadata 属性在 HTML 中是一个非常有用的属性，可以在媒体元数据加载时触发相应的事件处理程序，用于访问和操作媒体元数据。