阶段一: 直接裸用 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. spark数据分析导论

    1.spark的定义 spark是一个用来实现快速而通用的集群计算平台,高效的支持更多计算模式,包括交互式查询和流处理. 主要特点就是能够在内存中进行计算,即使在磁盘上进行计算依然比mapreduce ...

  2. Python格式输出汇总

    print ('%10s'%('test')) print ('{:<10}'.format('test'))#left-aligned print ('{:>10}'.format('t ...

  3. Web核心之Response对象

    http协议的响应部分 格式: HTTP/1.1 200 OK Content-Type: text/html;charset=UTF-8 Content-Length: 101 Date: Wed, ...

  4. PHP curl_multi_exec函数

    curl_multi_exec — 运行当前 cURL 句柄的子连接 说明 int curl_multi_exec ( resource $mh , int &$still_running ) ...

  5. [CSP-S模拟测试]:阴阳（容斥+计数+递推）

    题目传送门(内部题16) 输入格式 第一行两个整数$n$和$m$,代表网格的大小.接下来$n$行每行一个长度为$m$的字符串,每个字符若为$W$代表这个格子必须为阳,若为$B$代表必须为阴,若为$?$ ...

  6. C#面向对象笔记

    1.面向对象核心概念 (1)类是抽象,对象是实例,new一个对象会分配一块堆空间,对象指向该空间的地址,将对象赋值给另一个对象,只是将地址赋给它,指向的是同一块空间. e.g. class Car { ...

  7. 信息安全-攻击-XSRF：XSRF/CSRF 攻击

    ylbtech-信息安全-攻击-XSRF:XSRF/CSRF 攻击 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Ses ...

  8. 热经-北京中地时空数码科技有限公司-研发工程师（WEBGIS方向）

    一面: 登记,填写个人信息 笔试 选择题: HTML,CSS,JS 的选择题,都是基础题.其中有一道问哪个不是 document 的属性或方法,我在 bgColor 和 focus() 上面纠结了一下 ...

  9. Windows 08R2_AD图文详解

    目录 目录 软件环境 Active Directory域服务 AD的应用 创建ADDS域 使用Windows窗口来创建ADDS域控制器 使用Powershell来创建ADDS域控制器 检查ADDC域控 ...

  10. Android深度探索-卷1第三章心得体会

    第三章整章介绍了git,git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.通过配置git后可以很方便的找到需要的资源,更多的是代码和包,可以在本地建立版本库,为了 ...