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