使用HTML video标签实现大视频指定时间戳起止播放的问题咨询

你原来使用的#t=start,endURL锚点是HTML5媒体片段规范的原生能力，小视频体积小、元数据加载快，所以可以正常触发。大视频场景下失效的核心原因有3个：

1. 服务器如果不支持Range请求，浏览器无法直接跳转到指定时间对应的字节偏移位置，锚点参数会被忽略
2. 大视频元数据未完成加载时，浏览器无法识别锚点的时间范围参数
3. 部分浏览器对超过特定体积的视频，不会主动解析媒体片段锚点参数

前置要求：首先确认你的文件存储服务器支持Range请求，且MP4文件为快速启动格式（moov元数据箱放在文件头部，而非尾部），这是大视频可随机跳转的基础。

方案1：前端事件监听控制（兼容绝大多数场景，实现成本最低） #

不依赖浏览器原生锚点解析，主动通过事件控制播放边界，代码如下：

<!-- 新增preload属性，仅加载视频元数据，不需要加载完整视频 -->
<video id="myVideo" width="740px" height="665px" preload="metadata"></video>

<script>
const myVideo = document.getElementById('myVideo');
const startTime = 15;
const endTime = 20;

// 直接赋值原始视频地址，不携带锚点参数
myVideo.src = '../../static/videos/abc.mp4';

// 元数据加载完成后直接跳转到起始时间并播放
myVideo.addEventListener('loadedmetadata', () => {
  myVideo.currentTime = startTime;
  myVideo.play();
});

// 监听播放进度，到达结束时间立刻暂停
myVideo.addEventListener('timeupdate', () => {
  if (myVideo.currentTime >= endTime) {
    myVideo.pause();
    // 可选：播放完成后重置到起始位置
    // myVideo.currentTime = startTime;
  }
});

// 可选：禁止用户拖动进度条到允许播放范围之外
myVideo.addEventListener('seeking', () => {
  if (myVideo.currentTime < startTime) {
    myVideo.currentTime = startTime;
  } else if (myVideo.currentTime > endTime) {
    myVideo.currentTime = endTime;
  }
});
</script>

方案2：MediaSource Extensions 精确加载（适合对流量、控制精度要求高的场景） #

如果需要严格限制用户只能获取指定时间段的视频内容，可以通过Fetch携带Range头请求对应时间的字节片段，再喂给MediaSource接口播放，该方案需要提前计算时间对应的视频字节偏移，适合有一定前端开发能力的场景使用。

• 超过1G的超高清大视频，建议转成HLS/DASH切片格式，直接加载对应时间段的切片文件，跳转和加载速度都会大幅提升
• 不要使用preload="auto"配置，大视频场景下会浪费不必要的带宽，延长初始化时间

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