阶段一: 直接裸用 video 标签, 安卓 - 会重新弹一个播放层, 和之前video的父盒子错位, 要多丑有多丑, 体验要多烂有多烂.

阶段二: video添加以下属性, 安卓可实现内联播放, 但是会层级过高, 遮住页面中的其他重叠元素.

<video

  x-webkit-airplay="allow"

  webkit-playsinline=""

  x5-playsinline=""

  playsinline=""

></video>

阶段三: 查看了腾讯浏览服务的官方文档, 发现了一个 x5-video-player-type="h5-page" 属性, 加上! 奇迹发生了 video内联播放了, 且没有挡住其他元素, 但是还有一个问题, 会出现一个全屏按钮, 挡住了我们业务的一个按钮, 但是已经好很多了!

<video

  x5-video-player-type="h5-page"

></video>

( 随便说说! 添加属性要一个个单独试, 不能看到什么属性, 就往项目上累加, 其实上面说的属性, 我之前都找到过, 但都是一股脑往项目扔, 结果一个都没起作用, 后面单独添加才出效果, 这要注意)

微信浏览器 video - android适配的更多相关文章

  1. 解决微信浏览器video全屏的问题

    解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...

  2. 防止微信浏览器video标签全屏的问题

    在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...

  3. 大事记 - 安卓微信浏览器 video 标签层级过高

    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...

  4. 华为，小米部分机型微信浏览器rem不适配的解决方案

    针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案 目前来看,产生这个情况的原因是因为给html附font-size时,附上的fon ...

  5. 微信浏览器video播放视频踩坑

    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...

  6. 微信浏览器video

    <style> /* 解决上下有黑边,不能全屏 */ video{object-fit: fill;} </style> <video id="videoID& ...

  7. video 标签在微信浏览器的问题解决方法

    最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...

  8. 微信浏览器安卓手机video浮在最上层问题

    微信浏览器安卓手机video浮在最上层问题 //x5-video-player-type="h5" x5-video-player-fullscreen="true&qu ...

  9. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

随机推荐

  1. 非阻塞套接字与IO多路复用(转,python实现版)

    非阻塞:指在不能立刻得到结果之前,该函数不会阻塞当前线程,而会立刻返回.epoll工作在非阻塞模式时,才会发挥作用. 我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个 ...

  2. 安装Windows与CentOS双系统

    1.安装Windows系统 安装过程除了分区时要预留出部分空间来安装CentOS之外,其它操作与正常安装一样. 2.安装CentOS系统 使用光盘引导安装,因安装为服务器版,建议选择无界面,最小化安装 ...

  3. css----overflow（布局）

    CSS overflow 属性用于控制内容溢出元素框时显示的方式. CSS Overflow CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条. overflow属性 ...

  4. HTTP协议缓存

    缓存的概念 缓存这个东西真的是无处不在, 有浏览器端的缓存, 有服务器端的缓存,有代理服务器的缓存, 有ASP.NET页面缓存,对象缓存. 数据库也有缓存, 等等. http中具有缓存功能的是浏览器缓 ...

  5. Orcad Capture元件库介绍--Cadence Allegro

    绘制原理图和PCB,最好有自己的元件封装.元件库 ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C ...

  6. 单片机程序第一句ORG 0030H什么意思

    ORG是伪指令,告诉 编译 器,程序从ROM的0000开始存放程序,但是AJMP MAIN是一条无条件跳转指令,也就是说,单片机上电之后首先从0000处开始执行程序,但是,AJMP直接将程序跳转到MA ...

  7. Nuget-Swagger-Swashbuckle：Swashbuckle

    ylbtech-Nuget-Swagger-Swashbuckle:Swashbuckle 1.返回顶部 1. Seamlessly adds a Swagger to WebApi projects ...

  8. 出席分布式事务Seata 1.0.0 GA典礼

    前言 图中那个红衣服的就是本人 什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上. 简单的说,就是一次大的操作由不同的小 ...

  9. 通过注册表修改IE的Internet选项

    Internet Explorer 安全区域设置存储在以下注册表子项下面: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\I ...

  10. 把 MongoDB 当成是纯内存数据库来使用（Redis 风格）

    基本思想 将MongoDB用作内存数据库(in-memory database),也即,根本就不让MongoDB把数据保存到磁盘中的这种用法,引起了越来越多的人的兴趣.这种用法对于以下应用场合来讲,超 ...