HTML | DOM onloadedmetadata 事件

在 HTML 中，onloadedmetadata 事件会在媒体文件的元数据（如持续时间、宽度、高度等）被加载时触发。这意味着在该事件触发之前，无法获取媒体文件的元数据。

使用方法

该事件可以通过 HTML 元素的 onloadedmetadata 属性来绑定：

<video onloadedmetadata="myFunction()">
  <source src="myVideo.mp4" type="video/mp4">
</video>

也可以使用 JavaScript 中的 addEventListener() 方法来绑定：

<video id="myVideo">
  <source src="myVideo.mp4" type="video/mp4">
</video>

var video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", myFunction);

用途

onloadedmetadata 事件可以用于获取媒体文件的元数据，从而进行一些相应的操作。例如，您可以在视频播放器中使用该事件来动态地调整视频播放器的大小：

<video id="myVideo" onloadedmetadata="resizePlayer(this)">
  <source src="myVideo.mp4" type="video/mp4">
</video>

function resizePlayer(video) {
  var playerWidth = video.videoWidth;
  var playerHeight = video.videoHeight;
  // 调整视频播放器大小
}

兼容性

onloadedmetadata 事件兼容大多数主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。

在 IE 中，loadedmetadata 事件可以使用，但需要添加前缀MS：

var video = document.getElementById("myVideo");
video.addEventListener("MSloadedmetadata", myFunction);

总结

onloadedmetadata 事件是在媒体文件的元数据被加载时触发的，可以用于获取媒体文件的元数据，从而进行相应的操作。它在视频播放器等应用中有广泛的应用。