使用:
<VideoPlayer src={domainUrl + preViewItem.videoUrl} autoplay={true} controls={true} />
源代码:
import React, {memo, useEffect, useState, forwardRef, useImperativeHandle} from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
const VideoPlayer = (props, ref) => {
const {videoRef, loop, controls, preload, autoplay, muted, onMouseOver, onMouseLeave, poster} = props;
const [videoPlayerId] = useState(`videoPlayer${_.random(0, 1000000)}`);
const [src, setSrc] = useState(props.src);
const [videoPlayer, setVideoPlayer] = useState();
useImperativeHandle(ref, () => ({
updateCurrentTime
}));
useEffect(() => {
setSrc(props.src);
videoPlayer && videoPlayer.src([{src: props.src}, {src: props.src, type: 'application/x-mpegURL'}]);
}, [props.src]);
const crateVideoPlayer = () => {
const options = {
loop,
controls,
preload,
autoplay,
muted,
poster,
loadingSpinner: {},
playbackRates: [0.5, 1, 1.5, 2]
};
return videojs(videoPlayerId, options);
};
useEffect(() => {
videoPlayer && videoPlayer.poster(poster);
}, [poster]);
const destroyVideoPlayer = player => {
player && player.pause();
player && player.dispose();
// 退出画中画模式
if (document.pictureInPictureElement) {
document.exitPictureInPicture().catch(error => {
console.error('Failed to exit picture-in-picture mode:', error);
});
} else if (document.webkitPictureInPictureElement) {
document.webkitExitPictureInPicture().catch(error => {
console.error('Failed to exit picture-in-picture mode:', error);
});
}
};
useEffect(() => {
const player = crateVideoPlayer();
setVideoPlayer(player);
return () => {
destroyVideoPlayer(player);
player && player.dispose();
};
}, []);
const handleMouseOver = () => {
onMouseOver && onMouseOver();
};
const handleMouseLeave = () => {
onMouseLeave && onMouseLeave();
// showPoster();
};
const updateCurrentTime = currentTime => {
if (videoPlayer) {
videoPlayer.currentTime(0);
// const currentPoster = videoPlayer.poster();
// videoPlayer.poster(currentPoster);
videoPlayer.pause();
}
};
const showPoster = () => {
const vjsPosters = document.getElementById(videoPlayerId)?.getElementsByClassName('vjs-poster');
_.forEach(vjsPosters, vjsPoster => {
vjsPoster.style.display = 'block';
});
};
const hidePoster = () => {
const vjsPosters = document.getElementById(videoPlayerId)?.getElementsByClassName('vjs-poster');
_.forEach(vjsPosters, vjsPoster => {
vjsPoster.style.display = 'none';
});
};
// const handleMouseEnter = () => {
// videoPlayer && videoPlayer.userActive(true);
// };
return (
<div ref={ref} onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>
<video ref={videoRef} id={videoPlayerId} className="video-js vjs-default-skin">
<source id="source" src={src} />
<source id="source" src={src} type="application/x-mpegURL" />
</video>
</div>
);
};
export default forwardRef(VideoPlayer);
01-25
04-15
09-14
11-25
6268
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-07