HTML 音频/视频 DOM played 属性

HTML5 提供了 <audio> 和 <video> 标签，使得在网页中嵌入音频和视频变得更加简单。在使用这两个标签的过程中，我们可以通过 DOM 中的 played 属性来获取媒体文件已播放的部分。

什么是 played 属性？

played 属性是 <audio> 和 <video> 标签的一个只读属性，它返回一个 TimeRanges 对象，表示媒体文件已经播放的部分。TimeRanges 对象是一个包含开始时间和结束时间的集合，可以通过其 length 属性获取播放片段的数量。

如何使用 played 属性？

要获取媒体文件已播放的部分，我们可以通过以下代码来访问 played 属性：

const media = document.querySelector('audio');
const playedSegments = media.played;

for (let i = 0; i < playedSegments.length; i++) {
    const start = playedSegments.start(i);
    const end = playedSegments.end(i);
    console.log(`播放片段 ${i + 1}: 从 ${start} 秒到 ${end} 秒`);
}

在上面的示例中，我们首先获取了 <audio> 标签，然后通过 media.played 来获取已播放的片段。接着使用 for 循环遍历每个播放片段，并输出其开始时间和结束时间。

示例

下面是一个简单的示例，展示如何使用 played 属性来获取已播放的片段：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Played 属性示例</title>
</head>
<body>
    <audio controls>
        <source src="sample.mp3" type="audio/mpeg">
    </audio>

    <script>
        const media = document.querySelector('audio');
        const playedSegments = media.played;

        media.addEventListener('timeupdate', () => {
            for (let i = 0; i < playedSegments.length; i++) {
                const start = playedSegments.start(i);
                const end = playedSegments.end(i);
                console.log(`播放片段 ${i + 1}: 从 ${start} 秒到 ${end} 秒`);
            }
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个包含音频文件的 <audio> 标签，并添加了一个事件监听器来实时输出已播放的片段信息。

结论

通过使用 HTML 的音频/视频标签以及 played 属性，我们可以轻松地获取媒体文件已播放的部分，从而实现更加灵活和定制化的播放控制。希望这篇文章能够帮助你更好地理解 played 属性的用法和作用。