天天看點

EasyCVR視訊廣場視訊播放時,因浏覽器視窗變化導緻視訊畫面變形該如何解決?

EasyCVR視訊融合平台部署輕快、功能靈活,可支援多協定、多類型裝置接入,平台基于雲邊端一體化架構,可在複雜的網絡環境中,将分散的各類視訊資源進行統一彙聚、整合、集中管理。在視訊能力上,可實作視訊直播、錄像、回放、檢索、雲存儲、告警上報、以及平台級聯等。

EasyCVR視訊廣場視訊播放時,因浏覽器視窗變化導緻視訊畫面變形該如何解決?

有使用者回報,EasyCVR視訊廣場播放視訊時,因浏覽器視窗發生變化,導緻播放器播放的視訊畫面變形。

EasyCVR視訊廣場視訊播放時,因浏覽器視窗變化導緻視訊畫面變形該如何解決?
EasyCVR視訊廣場視訊播放時,因浏覽器視窗變化導緻視訊畫面變形該如何解決?

如上圖對比可見,視訊畫面出現了嚴重的變形情況。我們也立刻對此情況進行了排查與解決。

1)增加js監聽時間:window.addEventListener(“resize”, function(){});

2)檢視正常視訊播放時的比例,在寬度發生變化時,根據比例計算出其寬度,并修改該元素的寬度,進而完成視訊根據視窗自适應大小;

3)在目前頁面銷毀時,移除目前的監聽,避免此監聽影響其他頁面。

移除監聽的方法:window.removeEventListener(“resize”, function(){});

參考代碼如下:

EasyCVR視訊廣場視訊播放時,因浏覽器視窗變化導緻視訊畫面變形該如何解決?

修改後樣式如下,視訊畫面已經恢複了正常比例:

EasyCVR視訊廣場視訊播放時,因浏覽器視窗變化導緻視訊畫面變形該如何解決?

繼續閱讀