以下是一个简单的例子，演示如何使用 ondurationchange 事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ondurationchange 事件示例</title>
</head>
<body>
<audio controls ondurationchange="handleDurationChange()">
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<script>
function handleDurationChange() {
var audio = document.querySelector('audio');
console.log('媒体的持续时间发生变化，新的持续时间为：', audio.duration, '秒');
}
</script>
</body>
</html>
在这个例子中，<audio> 元素带有 ondurationchange 属性，当媒体文件加载完成，而其持续时间发生变化时，会触发 handleDurationChange 函数。这个函数会在控制台输出新的媒体持续时间。
请注意，ondurationchange 事件不仅在媒体文件加载完成时触发，还可能在其他时候触发，比如在媒体元素的 duration 属性首次变为可获取的时候。因此，你可能需要结合其他事件（如 onloadedmetadata 事件）来更精确地处理媒体的持续时间变化。
如前所述，推荐使用 JavaScript 中的 addEventListener 方法来添加事件监听器，以提高代码的可维护性。
转载请注明出处：http://www.zyzy.cn/article/detail/4442/HTML