網頁直播/點播播放器EasyPlayer.js網頁web無外掛播放器渲染頁面出現倒掛的原因排查

EasyPlayer發表於2024-11-15

EasyPlayer.js網頁web無外掛播放器屬於一款高效、精煉、穩定且免費的流媒體播放器,可支援多種流媒體協議播放,無須安裝任何外掛,起播快、延遲低、相容性強,使用非常便捷。

EasyPlayer.js播放器不僅支援H.264與H.265影片編碼格式,也能支援WebSocket-FLV、HTTP-FLV、HLS(m3u8)、WebRTC、ws-fmp4、http-fmp4等格式的影片流,並具備直播、點播、錄影、快照截圖、MP4播放、多屏播放、倍數播放、全屏播放等功能特性。

1、功能介紹

  • 支援MSE H264和H265硬解碼;
  • 支援WebCodec H264和H265硬解碼;
  • 支援WASM H264和H265硬解碼/軟解碼;
  • 支援m3u8/HLS (H265/H265)播放;
  • 支援Mpeg4格式(H264)播放;
  • 支援HTTP-FLV/WS-FLV (H265/H265)播放;
  • 支援HTTP-FMP4/WS-FMP4 (H265/H265)播放;
  • 支援WEBRTC(easy支援H264/H265、其他流媒體支援H264)播放;
  • 支援裸流(H264/H265) 播放;
  • 支援直播和點播播放;
  • 支援點播多清晰度播放。

2、原因分析

這是由於在部分A卡上面,webgl渲染會存在相容性bug,導致了畫面180度倒掛。

透過webgl渲染(canvas)的時候,會出現部分機型畫面倒掛,一般這種情況都是出現在wasm渲染模式上面的。

3、對於渲染頁面直接倒過來180度的解決方法

  • 如果是h264的源,建議使用MSE硬解碼,透過設定useMSE:true,使得渲染元素是video標籤。
  • 如果是h265的源,推薦使用mse wasm webcodecs解碼之後透過video標籤渲染。
  • 提供一個操作按鈕,讓使用者可以手動的旋轉畫面,播放器提供了setRotate方法,可以透過setRotate方法旋轉畫面。

總之EasyPlayer.js H5播放器,是一款能夠同時支援HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4影片直播與影片點播等多種協議,支援H.264、H.265、AAC、G711A、Mp3等多種音影片編碼格式,支援MSE、WASM、WebCodec等多種解碼方式,支援Windows、Linux、Android、iOS全平臺終端的H5播放器,使用簡單, 功能強大。

相關文章