是否可以在video标签内， 配置播放循环这个时间范围播放（294,297）？

Question

请问是否可以在<video>标签内配置循环播放？

通过如下的代码可以对视频截取一段时间播放：结束后就自然停止了：再点击播放又会从停止时间点开始继续播放：

<div>
<video style="width: 500px; height: auto;" controls src="assets/thisvideo.mp4#t=294,297"  
>
</video>
</div>

我的需求：
是否可以在video标签内，
1、配置播放循环这个时间范围播放（294,297）？
2、或者只能允许在此范围内拖拽播放视频内容，不播放这个范围外的内容。

Answer 1

是的，在HTML5的<video>标签中，可以通过多种方式配置视频循环播放的时间范围。以下是几种实现方法：

1. 使用loop属性（简单循环）

   <video src="video.mp4" loop></video>

   这会实现整个视频的完整循环播放。

2. 使用Media Fragments API（指定时间范围循环）

   <video src="video.mp4#t=10,20" loop></video>

   这会循环播放视频中从10秒到20秒的片段。

3. 使用JavaScript控制（更精确的控制）

   <video id="myVideo" src="video.mp4"></video>
   <script>
     const video = document.getElementById('myVideo');
     video.addEventListener('timeupdate', function() {
    if(this.currentTime > 20) {  // 20秒时跳回10秒
      this.currentTime = 10;
    }
     });
   </script>

4. 结合使用（推荐方式）

   <video id="myVideo" src="video.mp4#t=10,20" loop></video>

注意事项：

• 片段循环的精确度取决于浏览器实现
• 某些移动设备可能对片段循环支持有限
• 建议添加preload="metadata"属性以提高片段定位准确性
• 跨浏览器测试很重要，不同浏览器可能有细微差异

对于需要精确控制的情况，JavaScript方案是最可靠的，虽然需要编写更多代码，但可以确保在所有现代浏览器中正常工作。