防止微信浏览器video标签全屏的问题
在微信浏览器里面使用video标签，会自动变成全屏，改成下面就好了，起码可以在video标签之上加入其他元素。
<video id="videoID" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" width="100%" height="100%" preload="auto" poster="" src=""></video>
还有个问题，在Android的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。
解决办法：给video加上object-fit: fill;的style属性。
案例：
| http://test.migucloud.com/vi0/360/3H/YEtSz9x5mHYrnzglvsHD/3HYEtSz9x5mHYrnzglvsHD.mp4 | 龙珠超MAD-青鸟（Flow） |
| http://test.migucloud.com/vi0/360/3L/APwQ3ad3AGxt4pp0YNNv/3LAPwQ3ad3AGxt4pp0YNNv.mp4 | 龙珠超MAD-那个那个啊（咕噜碳） |
| http://note.youdao.com/yws/api/personal/file/WEBf82fd575bd63c60f98ba999f1c1279ad?method=download&inline=true&shareKey=9862400b661006b5cf5a512e5ad80d6d | LEVEL5-御坂美琴 |
WeChat H5 Video播 放 问 题 详 解：http://mp.weixin.qq.com/s/KZbVqLOLZuOOMUOYUvPaKA
防止微信浏览器video标签全屏的问题的更多相关文章
- 微信video标签全屏无法退出bug 本文系转载
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- 微信video标签全屏无法退出bug
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- X5内核浏览器video自动全屏解决办法-canvas
最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...
- 大事记 - 安卓微信浏览器 video 标签层级过高
// 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...
- 解决微信浏览器video全屏的问题
解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...
- video 在微信中，安卓全屏和ios上如何内联播放？H5同层播放器相关接入规范
今天在做一个分享页面的时候需要播放视屏用了video,然后各种坑开始了: <video src="http://xxx.mp4 " id="myVideo" ...
- video自动全屏播放
video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...
- 微信内置浏览器video标签自动全屏的问题
微信打开h5video视频的时候都会自动全屏播放,有时候影响用户体验 要禁止自动全屏就要加这几个属性 'x5-playsinline':'true', 'webkit-playsinline':'tr ...
- 微信浏览器video播放视频踩坑
video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...
随机推荐
- MySQL创建数据库与创建用户以及授权
1.create schema [数据库名称] default character set utf8 collate utf8_general_ci;--创建数据库 采用create schema和c ...
- cobbler自动安装系统
一.简介 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命令即可完成P ...
- JAVA发送邮件的DEMO
最近有朋友问邮件怎么发送,就简单写了个demo,因为懒得找jar包,所以项目是创建的maven工程,具体的maven引用的jar如下: <dependency> <groupId&g ...
- 用js控制css属性
在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...
- MyBatis快速入门（1）：搭建环境和单表映射
一.MyBatis简介 一说起对象关系映射框架,大家第一时间想到的肯定是Hibernate.Hibernate作为一个著名的框架,功能十分强大.我们只需要配置好实体类和数据表之间的关系,Hibe ...
- 模块“XXX.dll”加载失败
具体问题:模块“XXX.dll”加载失败 请确保该二进制存储在指定的路径中,或者调试它以检查该二进制或相关的.DLL文件是否有问题 找不到指定的模块. 1.在安装C++软件的时候,有时候安装失败提示 ...
- 关于View Link
当需要表格之间的父子结构的时候需要展示时,这个时候就需要建立View Link来实现Table之间的关联.在建立ViewLink时需要现将JDev关闭然后再进行创建自己需要的ViewLink.
- Python之路-Linux命令基础（2）
作业一: 1) 新建用户natasha,uid为1000,gid为555,备注信息为"master" 2) 修改natasha用户的家目录为/Natasha 3) ...
- android.util.Log常用方法
android.util.Log常用的方法有以下5个: Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母分别对应VERBOSE,DEBUG,INFO, ...
- 华为C语言编程规范笔记1
入职之前,公司培训,做了点笔记~