HTML 中媒体播放位置变化时执行脚本

在网页开发中，实现当 HTML 媒体（如音频和视频）播放位置变化时执行脚本，能为用户带来更加交互性和个性化的体验。这一功能不仅可以增强用户与媒体内容之间的互动，还能满足各种特定的业务需求。

要达成这一效果，关键在于利用 HTML 媒体元素提供的事件监听器。以<video>标签为例，它具有一个timeupdate事件，每当视频的播放位置发生变化时，该事件就会触发。通过监听这个事件，我们可以编写相应的脚本逻辑。

假设我们要在视频播放到特定时间点时，显示一条提示信息。在 HTML 文件中创建一个基本的视频元素：

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

接着，使用 JavaScript 来监听timeupdate事件并执行脚本：

const myVideo = document.getElementById('myVideo');
myVideo.addEventListener('timeupdate', function() {
    const currentTime = myVideo.currentTime;
    if (currentTime >= 10 && currentTime < 11) {
        alert('视频已播放到第 10 秒啦！');
    }
});

在这段代码中，我们获取了视频元素，然后添加了timeupdate事件监听器。在事件处理函数中，通过currentTime属性获取当前播放位置。当播放位置处于 10 秒到 11 秒之间时，弹出一个提示框。

对于音频元素<audio>，同样可以利用timeupdate事件来实现类似的功能。比如，当音频播放到某个特定时间，切换页面的背景颜色：

<audio id="myAudio">
    <source src="your-audio-url.mp3" type="audio/mp3">
</audio>

const myAudio = document.getElementById('myAudio');
myAudio.addEventListener('timeupdate', function() {
    const currentTime = myAudio.currentTime;
    if (currentTime >= 5 && currentTime < 6) {
        document.body.style.backgroundColor = 'lightblue';
    }
});

通过这种方式，我们可以根据媒体播放位置的变化，灵活地执行各种脚本操作，如动态加载新的内容、触发动画效果、与后端进行数据交互等。这为丰富网页的功能和用户体验提供了广阔的可能性，让我们能够打造出更加生动和吸引人的媒体驱动型网页。