实现代码:
<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;}};