在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

EasyCVR视频融合平台發表於2024-04-15
H5無外掛流媒體播放器EasyPlayer屬於一款高效、精煉、穩定且免費的流媒體播放器,可支援多種流媒體協議播放,可支援H.264與H.265編碼格式,效能穩定、播放流暢,能支援WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC、WS-FMP4、HTTP-FMP4等格式的影片流,並且已實現網頁端實時錄影、在iOS上實現低延時直播等功能。

在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

今天我們來介紹下在Vue3中如何使用EasyPlayer.js播放器?具體流程如下:

1)首先透過npm引入easyplayer.js;

npm install @easydarwin/easyplayer

2)然後找到專案node_modules中的easydarwin,如下:

在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

3)逐級點選easyplayer->dist->element;

4)找到EasyPlayer-element.min.js、EasyPlayer.wasm,將這兩個檔案複製到專案的根目錄下;

5)在專案的入口檔案index.html中,透過script標籤引入EasyPlayer-element.min.js,如下圖:

在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

6)完成以上操作後,就可以在vue元件中直接使用EasyPlayer播放器了。

在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

注意:如果需要使用到快照功能,需要先獲取播放器easyplayer的vue例項,然後透過例項去呼叫snapshot方法。

在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

在Vue3中如何使用H.265影片流媒體播放器EasyPlayer.js?

在功能上,EasyPlayer支援直播、點播、錄影、快照截圖、MP4播放、多屏播放、倍數播放、全屏播放等特性,具備較高的可用性和穩定性。為了便於使用者整合與呼叫,我們也提供了API介面供大家使用。EasyPlayer效能穩定、播放流暢,感興趣的使用者可以自行下載測試。

相關文章