设置视频播放时长不超过 5 min

设置视频播放时长不超过 5 min

    const videoPlayer = document.getElementsByTagName("video"); // 获取 video 标签, 全局变量
    
    useEffect(() => {
    // 可能有多个视频，需要转 array 后 map 一下
    const videoPlayerArray = Array.from(videoPlayer);
    // 非空判断
    videoPlayerArray && videoPlayerArray.length > 0 && videoPlayerArray.map((item, index)=>{
      item.addEventListener('timeupdate', function () {
        // item.duration 获取视频时长，只读属性
        // item.currentTime 获取视频播放进度或者说当前播放时长，单位为 s，读写属性
        if(item.currentTime > 5 * 60){ 
          item.currentTime = 0; // 超过五分钟时，自动重新播放
        }
       }, false);
    });
  }, [videoPlayer]);

在 react 中用 ref 性能高一些, 但是多个 video，相同的 ref 只能获取到最后一个，卒

    
    <video muted={true} ref={videoEl} width="730px" />
    const videoEl = useRef(null);
    const videoPlayer = videoEl && videoEl.current;

    useEffect(() => {
        videoPlayer && videoPlayer.addEventListener('timeupdate', function () {
            if(videoPlayer.currentTime > 5){
                videoPlayer.currentTime = 0;
            }
        }, false);
    }, [videoPlayer]);