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

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

HTML | DOM ondurationchange 事件

介绍

在 HTML 中，<video> 和 <audio> 标签提供了媒体播放的功能。这些标签提供了许多事件，可以让开发人员有机会在媒体播放期间执行 JavaScript 代码。其中一个事件是 ondurationchange 事件，可以在 <video> 或 <audio> 的持续时间（duration）发生变化时触发。

触发条件

ondurationchange 事件在以下情况下会被触发：

  • 选择新媒体时。当一个新的媒体源被选中时，其持续时间可能会发生变化，从而触发 ondurationchange 事件。
  • 媒体元素首次加载到播放器中时。在媒体元素首次被播放之前，可能需要一些时间加载所有媒体数据。在这个加载过程中，持续时间可能会发生变化。
  • 当媒体播放时，如果检测到数据，而这些数据之前没有被检测到，也会触发 ondurationchange 事件。
  • 在媒体播放期间，如果播放位置达到了解码范围之外的数据，也会触发 ondurationchange 事件。这通常发生在跳过媒体或重新加载媒体时。
  • 在媒体播放期间，如果检测到新的 tracks，这些 tracks 可能会更改总的播放时间，从而触发 ondurationchange 事件。
实例

以下是一个 ondurationchange 事件的实例。当音频文件的持续时间发生变化时，会输出一条提示信息：

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio" src="song.mp3"></audio>

<script>
var x = document.getElementById("myAudio");

x.onloadedmetadata = function() {
  alert("Metadata for audio has been loaded");
};

x.ondurationchange = function() {
  alert("Duration for audio has changed");
};
</script>

</body>
</html>
总结

ondurationchange 事件提供了一个机会，以便在媒体播放期间执行 JavaScript 代码。可以使用 ondurationchange 事件跟踪音频或视频文件的持续时间，并在持续时间发生变化时进行其他操作。

需要注意的是，在使用 ondurationchange 事件时要注意不要过度使用。持续时间的变化可能涉及到网络加载和其他因素，因此在对持续时间进行调整时应考虑到这些因素。