移动端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>