如何让HTML的MP4视频按指定时间区间循环播放？

原生video标签搭配src的#t片段参数无法实现指定区间循环——因为loop属性会让视频重新加载并回到开头，而非片段的起始位置。用JavaScript可以精准控制播放区间，具体步骤如下：

1. 简化HTML结构 #

移除无效的片段参数和重复属性：

<video playsinline autoplay muted id="robotVid">
    <source src="video1.mp4" type="video/mp4">                    
</video>

2. 添加JavaScript控制逻辑 #

通过监听播放事件，强制视频在指定区间内循环：

const video = document.getElementById('robotVid');
const start = 25; // 播放区间起始秒数
const end = 30;   // 播放区间结束秒数

// 视频元数据加载完成后，定位到起始播放位置
video.addEventListener('loadedmetadata', () => {
    video.currentTime = start;
});

// 实时监控播放进度，到达结束点就跳回起始位置
video.addEventListener('timeupdate', () => {
    if (video.currentTime >= end) {
        video.currentTime = start;
        video.play(); // 部分浏览器跳转后会暂停，需主动触发播放
    }
});

// 处理意外结束的情况，强制回到起始点继续播放
video.addEventListener('ended', () => {
    video.currentTime = start;
    video.play();
});

关键说明 #

• loadedmetadata事件确保视频元数据（时长等信息）加载完成后再设置播放位置，避免无效操作。
• timeupdate事件实时检测播放进度，精准触发区间跳转。
• 额外监听ended事件，防止视频因异常情况结束后重新播放整个视频。

内容的提问来源于stack exchange，提问作者Mustafa GÜL