react里引入西瓜视频播放器

由于已经引入了 xgplayer 的2.31.1版本了且已经有很多页面在用；新页面不打算继续用老版本的xgplayer，所以此处利用npm再引入3.0版本的xgplayer,修改package.json

"xgplayer": "^2.31.1",
"xgplayer3": "npm:xgplayer@3.0.9"

页面引入

<div className={prefixCls}>
    {videoUrl ? <div id="mse"></div> : <NoData defBg={defBg} theme={theme} />}
</div>

useEffect初始化播放器

const { videoUrl, autoPlay, repeatPlay, isQuiet, soundVolume } = option;
const volume = Number((soundVolume / 100).toFixed(1));

useEffect(() => {
    if (videoUrl) {
        const player = new Player({
            height: '100%',
            width: '100%',
            autoplay: autoPlay,
            defaultMuted: isQuiet,
            volume: volume || 0,
            loop: repeatPlay,
            id: 'mse',
            url: videoUrl
        });
    }
}, []);

效果如下：