react+video：限制快进、倍速、画中画

实现代码：

<video ref={videoRef} src={videoUrl} className={style.video} controls onRateChange={rateChange} onPlay={playVideo} onPause={pauseVideo} onTimeUpdate={timeUpdate} disablePictureInPicture playsInline poster={poster} controlsList="nodownload noremoteplayback noplaybackrate">
     您的浏览器不支持 video 标签。
</video>

js

    const [videoUrl, setVideoUrl] = useState('http://10.*.*.*:4010/file/attachments/20230411150035.mp4');
    const videoRef = useRef(null);
    const lastTime = useRef(0);
    const [isPlaying, setIsPlaying] = useState(false);
    useEffect(() => {
        const videoElement = videoRef.current;
        //限制画中画播放
        const handleEnterPictureInPicture = async () => {
            Toast.show('当前视频不支持画中画播放');
            if (document.pictureInPictureElement) {
                try {
                    await document.exitPictureInPicture();
                } catch (error) {
                    console.error('Error exiting Picture-in-Picture', error);
                }
            }
        };
        // 监听事件
        videoElement.addEventListener('enterpictureinpicture', handleEnterPictureInPicture);
        return () => {
            videoElement.removeEventListener('enterpictureinpicture', handleEnterPictureInPicture);
        };
    }, []);
    //限制倍速
    const rateChange = () => {
        if (videoRef.current.playbackRate !== 1.0) {
            Toast.show('当前视频不支持倍速播放');
            videoRef.current.playbackRate = 1.0;
        }
    };
    
    const playVideo = () => {
        if (!isPlaying) {
            videoRef.current.play();
            setIsPlaying(true);
        }
    };
    const pauseVideo = () => {
        if (isPlaying) {
            videoRef.current.pause();
            setIsPlaying(false);
        }
    };
    //点击实现播放/暂停
    const handlePlayPause = () => {
        if (isPlaying) {
            pauseVideo();
        } else {
            playVideo();
        }
    };
    //限制快进
    const timeUpdate = () => {
        const currentTime = videoRef.current.currentTime;
        console.log(currentTime);
        if (currentTime > lastTime.current + 1) {
            Toast.show('当前视频不支持快进');
            videoRef.current.currentTime = lastTime.current;
            return;
        } else {
            lastTime.current = currentTime;
        }
    };