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

LinkedME2016 發布于2019-08-30 15:56 / 3442人閱讀

摘要：安卓端下的標簽播放時會被瀏覽器接管。安卓下的內核瀏覽器，提供了相關屬性。以下內容范圍安卓在未被播放之前，標簽屬于正常文檔元素，也是生效的。標簽播放中和播放之后均會覆蓋。刪除標簽，瀏覽器的視頻播放組件會立即消失，時間大幅度縮短。

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標簽，瀏覽器的視頻播放組件會立即消失，時間大幅度縮短。
比如：

我們要解決彈窗被視頻遮擋的問題，此時我們可以將視頻這一節點刷新（刪除后再次添加）

我們想要切換視頻，就先把當前正在播放的視頻刷新，然后播放下一個視頻。

云服務器 GPU云服務器移動端頁面移動端頁面顯示移動端html頁面 video標簽 webrtc流

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117459.html

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

摘要：安卓端下的標簽播放時會被瀏覽器接管。安卓下的內核瀏覽器，提供了相關屬性。以下內容范圍安卓在未被播放之前，標簽屬于正常文檔元素，也是生效的。標簽播放中和播放之后均會覆蓋。刪除標簽，瀏覽器的視頻播放組件會立即消失，時間大幅度縮短。 1.安卓端下的video標簽播放時會被瀏覽器接管。此時已經脫離了文檔流，并且與文檔已經非同層了，所以設置z-index是無效的。2.安卓下qq的x5內核瀏覽器，...

iamyoung001 2019-08-23 15:35 評論0 收藏0
css前端初始化

摘要：初入前端，若有不足歡迎指正頭部初始化標簽問題一般要添加背景音樂的話，我們的第一反應就是使用標簽，但是這里有一個坑。前言當下移動端橫行，平常我們做一些移動端的項目，接觸最多的就是H5，雖然做移動端不用兼容IE，但是我們要兼容微信、app、ios、android... 今天就給寫幾個平常開發經常會遇到的問題以及解決辦法。初入前端，若有不足歡迎指正！頭部初始化 ...

mikyou 2019-08-29 16:19 評論0 收藏0
css前端初始化

摘要：初入前端，若有不足歡迎指正頭部初始化標簽問題一般要添加背景音樂的話，我們的第一反應就是使用標簽，但是這里有一個坑。前言當下移動端橫行，平常我們做一些移動端的項目，接觸最多的就是H5，雖然做移動端不用兼容IE，但是我們要兼容微信、app、ios、android... 今天就給寫幾個平常開發經常會遇到的問題以及解決辦法。初入前端，若有不足歡迎指正！頭部初始化 ...

寵來也 2019-08-02 11:09 評論0 收藏0