橫屏視頻自動播放踩坑


問題

做的頁面在chrome手機端有問題:
橫屏狀態下自動全屏。自動全屏瀏覽器會自動調webkit-requestfullscreen。
因為我們視頻播放控件是自定義的,沒收到全屏事件通知,會有自動全屏之后沒有控件的問題。
遇到了跟這位老哥一樣的問題:

起因

如圖所說,
Chrome 61 for Android added a feature that automatically expands a video to fullscreen when video is playing and user rotates the device to a landscape mode. Before v61, option was hiding behind the flag chrome://flags#video-rotate-to-fullscreen
chrome 61給安卓加了手機橫屏自動全屏的feature。61之前是默認關閉的,可以通過 chrome://flags#video-rotate-to-fullscreen打開這個feature。

過程

出現這個問題比較懵逼。我們視頻播放框架是基於videojs的封裝。但是videojs官網的視頻直接用是沒有這個問題的。
而且試了下原生播放控件是有這個問題的。

排查

排查之后發現是自己在代碼上加了controls=controls,就會有這種問題。

現象

這里測試到的現象是:

  1. 原生控件,加了controls=controls就會出現這種問題。
  2. 如果視頻不在播放狀態橫屏是不會全屏的。
  3. 如果一開始不在scrollTop = 0,比如滾動100px,也不會出現橫屏全屏的問題。

chrome有這種問題,那各種封裝了webkit內核的瀏覽器都有這種問題。比如華為瀏覽器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM