以下是一个简单的例子,演示如何使用 onseeked 事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onseeked 事件示例</title>
</head>
<body>
<audio controls onseeked="handleSeeked()">
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<script>
function handleSeeked() {
var audio = document.querySelector('audio');
console.log('媒体跳跃完成,当前播放位置:', audio.currentTime, '秒');
}
</script>
</body>
</html>
在这个例子中,<audio> 元素带有 onseeked 属性,当用户通过拖动播放进度条或通过脚本设置 currentTime 属性进行跳跃时,会触发 handleSeeked 函数。这个函数在控制台输出当前的播放位置。
需要注意的是,onseeked 事件可能在媒体元素进行跳跃时触发,而不仅仅是通过用户的交互。如果媒体元素的 currentTime 属性发生变化,可能会触发这个事件。
同样,推荐使用 JavaScript 中的 addEventListener 方法而不是在 HTML 属性中直接使用事件处理程序,以提高代码的可维护性。
转载请注明出处:http://www.zyzy.cn/article/detail/4446/HTML