橫屏視頻自動播放踩坑

問題

作的頁面在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內核的瀏覽器都有這種問題。好比華爲瀏覽器