Video seekable 属性

在 web 前端开发中，视频播放是一个非常常见的功能。用户可以通过控制条或者其他方式来控制视频的播放进度，其中就涉及到了 seekable 属性。本文将详细介绍 seekable 属性的作用、用法以及示例代码。

seekable 属性是什么？

在 HTML5 的 video 元素中，seekable 属性代表了视频当前可以跳转到的时间范围。也就是说，如果视频的 seekable 属性值为 [0, 30]，那么用户可以在视频播放过程中任意跳转到 0 到 30 秒的任意时间点。这个属性对用户来说非常实用，可以让他们快速定位到视频中感兴趣的内容。

如何使用 seekable 属性？

要获取视频的 seekable 属性，我们可以通过 video 元素的 seekable 属性来获取。示例如下：

// www.javascriptcn.com code example
<video id="myVideo" controls>
  <source src="myvideo.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('myVideo');
  video.addEventListener('loadedmetadata', function() {
    const seekableRange = video.seekable;
    console.log('Video seekable range:', seekableRange.start(0), '-', seekableRange.end(0));
  });
</script>

在上面的示例中，我们通过监听 video 元素的 loadedmetadata 事件来获取视频的元数据信息，然后通过 seekable 属性来获取视频的可跳转时间范围。最后我们将获取到的时间范围打印到控制台上。

示例代码

下面是一个更完整的示例代码，演示了如何在视频播放过程中根据用户的操作来控制视频的跳转：

// www.javascriptcn.com code example
<video id="myVideo" controls>
  <source src="myvideo.mp4" type="video/mp4">
</video>

<button onclick="jumpToTime(10)">Jump to 10s</button>
<button onclick="jumpToTime(30)">Jump to 30s</button>

<script>
  const video = document.getElementById('myVideo');

  function jumpToTime(time) {
    if (video.seekable.length > 0) {
      const seekableRange = video.seekable;
      for (let i = 0; i < seekableRange.length; i++) {
        if (time >= seekableRange.start(i) && time <= seekableRange.end(i)) {
          video.currentTime = time;
          break;
        }
      }
    }
  }
</script>

在上面的示例中，我们定义了两个按钮，分别可以控制视频跳转到 10 秒和 30 秒的位置。通过监听按钮的点击事件，我们可以调用 jumpToTime 函数来控制视频的跳转。

总结

通过本文的介绍，我们了解了 seekable 属性在视频播放中的重要性以及如何使用它来控制视频的跳转。希望本文对你有所帮助，谢谢阅读！