React项目中使用LivePlayer.js/EasyPlayer.js播放器

1.在官网下载播放器压缩包,官网地址: https://www.liveqing.com/docs/download/LivePlayer.html

2.解压压缩包,进入到其中的\dist\element文件夹,复制其中的 crossdomain.xml   liveplayer.swf 和 liveplayer-element.min.js三个文件,复制到你项目中的资源文件夹

3.打开React项目的HTML 模板, 在script标签中引入liveplayer-element.min.js文件,如:

<script src="<%= context.config.publicPath +'liveplayer-element.min.js'%>"/>

4.在你的组件中直接使用<live-player>标签

    <live-player
          className={styles.player}
          video-url={videoUrl} // 视频url
          fluent="true" // 流畅模式
          live // 是否直播, 标识要不要显示进度条
          stretch="true" // 是否拉伸
          autoplay="true"
          controls
    />

 5. LivePlayer和EasyPlayer播放器文档不是特别完善,可以用驼峰或者中划线猜测其属性 , 如:EasyPlayer有个文档中未注明的属性 current-time 和 LivePlayer的currentTime 设置当前的播放进度单位是秒

6. 获取EasyPlayer播放器的实例,以及事件监听

  useEffect(() => {
    const player = document.getElementById('player')
    console.log(player)
    player.addEventListener('ended', endPlay)
    player.addEventListener('timeupdate', timeupdate)
    return () => {
      player.removeEventListener('ended', endPlay)
      player.removeEventListener('timeupdate', timeupdate)
    }
  }, [])

  return (
      <div style={{ position: 'relative', padding: 0, margin: '20px auto', width: 700 }}>
        <easy-player
          id="player"
          // video-url  undefined 容易白屏 设置为 ''
          video-url={currentUrl || ''}
          fluent="true" // 流畅模式
          stretch // 是否拉伸
          muted="true" // 是否静音
          hide-big-play-button
          live="false"
          autoplay
          controls
          current-time={currentTime}
          // aspect="fullscreen" // 长比高的值过大 可能导致样式布局变化  不随外层div大小
        />
      </div>
)