移動端video標籤預設置頂的解決方案

標籤：video標籤   標籤   html   移動端   需要   視頻   form   video   它的   

概述

在移動端上面，比如說上面開啟一個頁面，如果有video標籤的話，常常會出現video標籤預設置頂的情況，一般的解決方案是在不需要看見它的時候給它加一個display:none進行隱藏。今天在瀏覽TGideas文件庫的時候無意中發現了另一個方案，記錄下來，供以後開發時參考，相信對其他人也有用。

解決方案

在樣式裡面加入如下樣式：

.compatibleStyle {    backface-visibility:hidden;    -webkit-backface-visibility:hidden; /* Chrome 和 Safari */    -moz-backface-visibility:hidden;  /* Firefox */    -ms-backface-visibility:hidden;  /* Internet Explorer */    -webkit-perspective: 0;    -webkit-transform: translate3d(0,0,0);    visibility:visible;}

然後給video標籤加上compatibleStyle類就可以了。

參考資料：
TGideas移動端視頻組件

移動端video標籤預設置頂的解決方案