React项目使用video标签指定播放片段时loop循环失效怎么解决

原生HTML的loop属性仅作用于完整视频资源的循环播放，#t=start,end属于媒体片段URL参数，浏览器原生逻辑不会将该片段识别为独立的循环单元，因此会出现loop失效的问题。

通过监听视频播放事件手动控制播放进度，实现指定片段循环，React实现代码如下：
首先导入需要的Hook：

import { useRef, useEffect } from 'react';

组件内实现逻辑：

// 定义片段起止时间
const START_SEC = 6;
const END_SEC = 12;

const VideoPlayer = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    // 视频加载完成后从起始时间开始播放
    const handleLoadedMetadata = () => {
      video.currentTime = START_SEC;
      video.play();
    };

    // 播放进度更新时检测是否到达结束时间
    const handleTimeUpdate = () => {
      if (video.currentTime >= END_SEC) {
        video.currentTime = START_SEC;
      }
    };

    // 绑定事件
    video.addEventListener('loadedmetadata', handleLoadedMetadata);
    video.addEventListener('timeupdate', handleTimeUpdate);

    // 卸载时解绑事件
    return () => {
      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
      video.removeEventListener('timeupdate', handleTimeUpdate);
    };
  }, []);

  return (
    <video
      ref={videoRef}
      src={option.videoUrl}
      autoPlay
      controls={false}
      muted
      playsInline
    />
  );
};

• 如果使用跨域视频资源，需要服务端配置Accept-Ranges响应头，否则设置currentTime会失效
• 若视频加载后自动播放失效，可检查浏览器自动播放策略，绝大多数浏览器要求静音视频可自动播放，非静音视频需要用户交互触发
• 可根据实际需求调整timeupdate的触发频率，默认触发间隔约为250ms，足以满足常规片段循环需求

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