当前位置：首页 > article >正文

EasyPlayer.js播放器在React项目中应如何使用？

article 2024/12/24 20:33:23

H5流媒体播放器，作为基于HTML5技术的创新产品，近年来在音频和视频播放领域取得了显著的发展。它不仅为用户提供了流畅、稳定的播放体验，还通过丰富的交互功能增强了用户的参与感。

那么在实际应用时，在React项目中应如何使用EasyPlayer播放器呢？

1、在官网下载播放器压缩包。

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

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

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

5、获取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
          Easy="false"
          autoplay
          controls
          current-time={currentTime}
          // aspect="fullscreen" // 长比高的值过大 可能导致样式布局变化  不随外层div大小
        />
      </div>
)

当前流媒体前景非常广阔，我们需要对它有更深的了解。EasyPlayer.js播放器不仅支持H.264与H.265视频编码格式，也能支持WebSocket-FLV、HTTP-FLV、HLS（m3u8）、WebRTC、ws-fmp4、http-fmp4等格式的视频流，并具备直播、点播、录像、快照截图、MP4播放、多屏播放、倍数播放、全屏播放等功能特性。