安卓移動端video標籤將頁面元素覆蓋。

1.安卓端下的video標籤播放時會被瀏覽器接管。此時已經脫離了文檔流,而且與文檔已經非同層了,因此設置z-index是無效的。
2.安卓下qq的x5內核瀏覽器,提供了相關屬性。分別爲:x5-playsinline:行內播放。x5-video-player-type="h5":播放層級爲文檔層級。若是頁面只有一個視頻並且該視頻在頁面的頂部用起來仍是比較順心的。不然會發現,額。。。播放視頻的時候會紊亂的。
因此移動端中,不建議作視頻和dom重合的設計。
若是必定要作,請繼續閱讀。
如下內容範圍:安卓
1.在video未被播放以前,video標籤屬於正常文檔元素,z-index也是生效的。此時層級高的dom能夠展現在video標籤區域上方。
2.video標籤播放中和播放以後均會覆蓋dom。
3.瀏覽器同時只能播放一個video標籤。當切換播放視頻內容時體驗不是很好:web

  • 瀏覽器播放組件切換視頻時花費的時間能夠明顯的感知的到。
  • 瀏覽器播放組件的底色通常是黑色,而咱們的web底色大多時候不是黑色,切換時,會出現閃動。是因爲瀏覽器播放組件的關閉而後再次打開形成的。

解決思路:
1.刪除和添加video標籤這一節點,這樣作會讓video標籤恢復到1中的狀態。
2.刪除video標籤,瀏覽器的視頻播放組件會當即消失,時間大幅度縮短。
好比:瀏覽器

  1. 咱們要解決彈窗被視頻遮擋的問題,此時咱們能夠將視頻這一節點刷新(刪除後再次添加)
  2. 咱們想要切換視頻,就先把當前正在播放的視頻刷新,而後播放下一個視頻。
相關文章
相關標籤/搜索