移動端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 class="IIV" src="../media/video.mp4" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" webkit-playsinline="" playsinline="">
    </video>