新手求助：如何用JS/HTML5仅加载视频的20秒-30秒时间段内容

嘿，作为HTML5和JS新手能想到用seek已经超棒啦！完全可以通过JS实现只加载并播放视频的00:20到00:30时间段，我给你准备了纯JS和jQuery两种方案，一步步来：

这种方案不需要依赖任何库，原生JS就能搞定，核心思路是先跳转到目标起始时间，再监听播放进度，到达结束时间就暂停：

<video id="myVideo" width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

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

// 等视频元数据加载完成（必须这一步，否则没法正确设置播放时间）
video.addEventListener('loadedmetadata', () => {
  // 直接跳转到20秒的位置
  video.currentTime = 20;
  
  // 开始播放
  video.play();
});

// 实时监听播放时间，到达30秒就暂停
video.addEventListener('timeupdate', () => {
  if (video.currentTime >= 30) {
    video.pause();
    // 如果想彻底停止加载，可以把视频源清空（后续要播放得重新设置src）
    // video.src = '';
  }
});
</script>

小说明 #

• loadedmetadata事件确保视频的时长、分辨率等元数据已经加载完成，这时候设置currentTime才会生效
• timeupdate事件会在播放时间变化时触发，我们用它来检查是否到达了30秒的结束点

如果你习惯用jQuery，逻辑和纯JS完全一致，只是语法上换成jQuery的写法：

<video id="myVideo" width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(() => {
  const $video = $('#myVideo');
  
  // 监听元数据加载完成事件
  $video.on('loadedmetadata', () => {
    // jQuery对象要访问原生DOM元素才能用currentTime这些属性
    $video[0].currentTime = 20;
    $video[0].play();
  });
  
  // 监听播放时间更新
  $video.on('timeupdate', () => {
    if ($video[0].currentTime >= 30) {
      $video[0].pause();
      // $video[0].src = '';
    }
  });
});
</script>

如果你的服务器支持HTTP Range请求，还可以直接在视频URL里指定时间范围，这样浏览器只会加载该时间段的内容，更高效：

<video width="320" height="240">
  <source src="movie.mp4#t=20,30" type="video/mp4">
  Your browser does not support the video tag.
</video>

不过这个方法依赖服务器配置，兼容性也不如JS控制稳定，作为新手先掌握前面两种JS方案更稳妥～

刚开始处理视频相关内容不用着急，多试试这些代码，有问题再调整就好！

内容的提问来源于stack exchange，提问作者Abdelhamied Mostafa