超强播放器支持flv、hls、rtmp等ckplayer

🔝🔝多媒体相关 | Gitee

antd中引入第三方js文件

找到document.ejs文件，引入

<script type="text/javascript" src="<%= context.publicPath %>ckplayer/ckplayer/ckplayer.js"></script>

以上尤其注意src，antd中必须这么写，否则找不到js文件，此js文件放到public文件夹中

具体操作

组件中为方便新建一个全局对象

const ckplayerOptions = {
  container: '#videoBodyDiv',
  autoplay: true,
  loop: false,
  variable: 'videoPlayer',
}

具体实现如下

let { hls, videoPlayer } = this.state;
const newVideoObject = { ...ckplayerOptions, video: finalUrl }
// 判断是需要重新加载播放器还是直接换新地址
if (videoPlayer) {
    // 当前是html5video，新地址如果是以下情况，则需要重新加载播放器，更换为flashPlayer
    if (videoPlayer.playerType === 'html5video') {
    if (videoPlayer.getFileExt(finalUrl) === '.flv'
        || videoPlayer.getFileExt(finalUrl) === '.m3u8'
        || videoPlayer.getFileExt(finalUrl) === '.f4v'
        || finalUrl.substr(0, 4) === 'rtmp'
        || finalUrl.includes('testFlv')) {
        videoPlayer.removeChild();

        videoPlayer = null;
        // eslint-disable-next-line new-cap
        videoPlayer = new window.ckplayer();
        videoPlayer.embed(newVideoObject);
    } else {
        videoPlayer.newVideo(newVideoObject);
    }
    } else if (videoPlayer.getFileExt(finalUrl) === '.mp4'
    || videoPlayer.getFileExt(finalUrl) === '.webm'
    || videoPlayer.getFileExt(finalUrl) === '.ogg') {
    videoPlayer = null;
    // eslint-disable-next-line new-cap
    videoPlayer = new window.ckplayer();
    videoPlayer.embed(newVideoObject);
    } else {
    videoPlayer.newVideo(newVideoObject);
    }
} else {
    // eslint-disable-next-line new-cap
    videoPlayer = new window.ckplayer(newVideoObject);
}
this.setState({ videoPlayer });