zoukankan      html  css  js  c++  java
  • 移动端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>
    
  • 相关阅读:
    程序员修炼之道阅读笔记02
    第十五周课堂练习-查找最长单词链
    文件读写总结
    第十五周
    暑假总结1
    软件工程课程总结
    第十六周总结
    用户场景分析
    学期课后个人总结
    第十五周总结
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9383886.html
Copyright © 2011-2022 走看看