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>
)