HTML ondurationchange 属性(1)

📌 相关文章

📜 HTML ondurationchange 属性(1)

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

HTML ondurationchange 属性

在 HTML5 中，音频和视频元素具有一个 ondurationchange 属性，在媒体的播放位置改变时触发事件。此属性可用于在文档中对媒体元素进行完全控制。

语法

<video ondurationchange="myFunction()">...</video>
<audio ondurationchange="myFunction()">...</audio>

其中，myFunction() 是在 ondurationchange 事件触发时执行的函数。

示例

下面是一个使用 ondurationchange 属性的简单示例。

<!DOCTYPE html>
<html>
<body>

<video ondurationchange="showDuration()">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
</video>

<p>视频时长： <span id="duration"></span></p>

<script>
function showDuration() {
  var video = document.getElementsByTagName("video")[0];
  var dur = video.duration;
  var duration = document.getElementById("duration");
  duration.innerHTML = dur;
}
</script>

</body>
</html>

在本例中，使用 ondurationchange 属性来绑定 showDuration() 函数。当媒体的 duration 属性改变时，该函数将内容填充到 duration 标签中。

属性

ondurationchange 属性具有以下属性：

值：JavaScript 代码
默认值：无
可继承：否
可操作元素：音频和视频元素

浏览器兼容性

ondurationchange 属性在所有主流浏览器中都得到支持，包括 Chrome、Firefox、Safari、Opera 和 Internet Explorer。但是，请注意，Internet Explorer 可能需要一个兼容的 canplaythrough 事件才能正确加载媒体资源。