問題
做的頁面在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,就會有這種問題。
現象
這里測試到的現象是:
- 原生控件,加了controls=controls就會出現這種問題。
- 如果視頻不在播放狀態橫屏是不會全屏的。
- 如果一開始不在scrollTop = 0,比如滾動100px,也不會出現橫屏全屏的問題。
chrome有這種問題,那各種封裝了webkit內核的瀏覽器都有這種問題。比如華為瀏覽器