html5 移动端视频video的android兼容(去除播放控件、全屏)

var video = document.querySelector('#mainvideo'); var videobox = document.querySelector('.videobox'); //播放时改变外层包裹的宽度，使video宽度增加， //相应高度也增加了,播放器控件被挤下去，配合overflow：hidden //控件看不见也触摸不到了 var setVideoStyle = function (){ videobox.style.width = '120%'; videobox.style.left = '-10%'; video.style.width = '100%'; }

当然上面这样写参杂了一些需求逻辑，也可以直接样式表就width:120%,或者更大；这个根据自己的需要来，但基本思路就是将播放器控件顶出视窗之外，达到一种‘去除’、‘消失’的效果。连‘小窗’字样也被顶出去了，用过android或测试过的同学都知道点了小窗后会怎样....（原版的即使去掉了播放器，但小窗字样还在，不能算完全的隐藏播放控件吧）

相应产生的一些问题的解决办法：

1，视频被放大了，画面会被截掉一部分怎么办？

这个可以在视频输出的时候两边和下边留一些留白，即留白可以没用画面黑色底，但又属于视频尺寸的一部分，放视频放大后，将主体画面置满视窗，被挤到外面都是留白的即可。

2，视频播放完毕后会中间自动出现播放控件按钮

如果确实不想在播放完是出现一个按钮，哪怕只有零点几秒，就把视频remove掉，可以使用timeupdate监听视频播放，用video.duration-video.currentTime的差值判断是否快要结束了，在结束前零点几秒提前remove掉。

3，要是不是全屏视频怎么搞？

可以，思路是一样的，将视频控件顶出外层的包裹层，利用overflow：hidden。只是全屏的外层包裹是body而已。

哦了，终于可以搞一个全屏视频伪装的东西了。

2017-03-21补
随着时间的变迁，设备和技术的更新，本着不坑害同胞的心，负责任更新下还是有必要的
咱们还是从上面的4个要点来说ios和android吧

全屏处理；

自动播放；

播放控制；

隐藏播放控件；

补充--全屏处理

ios加playsinline属性，之前只带webkit前缀的在ios10以后，会吊起系统自带播放器，两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器，还可以引用一个库iphone-inline-video（具体用法很简单看它github，这里不介绍了，只需加js一句话，css加点），
github地址是https://github.com/fregante/iphone-inline-video，加上playsinline webkit-playsinline这两个属性和这个库基本可以保证ios端没有问题了（不过亲测，只加这两个属性不引入库好像也是ok的，至今没有在ios端微信没有出现问题，如果你要兼容uc或者qq的浏览器建议带上这个库），
最后介绍个新的x5-video-player-type="h5"属性，腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核，使用这个属性在微信中视频会有不同的表现，会呈现全屏状态，貌似播放控件剥去了，至少加了这个属性后视频上层可以有其他dom元素出现了（非腾讯白名单机制的一种处理措施），

<video id="mainvideo" src=http://www.jb51.net/html5/"test.mp4" playsinline webkit-playsinline></video>

补充--自动播放

android始终不能自动播放，不多说。值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了（顺带音频也不能自动播放了），但微信提供了一个事件WeixinJSBridgeReady，在微信嵌入webview全局的这个事件触发后，视频仍可以自动播放，这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式，其他如手q或者其他浏览器，建议就引导用户出发触屏的行为操作出发比较好。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!