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


在我们需要播放时提前初始化它 , 即需要播放的时间前先设width:1px;然后play()一下 , 使视频已经播放初始化 。然后再需要播放的时候再次play()时就不会产生 , 控件拉伸的情况了 。
“去除”下的播放控件条
重头戏来了 , 相信这个这个问题已困扰无数的前端开发人员 , 再搜寻这个问题的解决方法时 , 几乎所有的文章都是告诉你下 , 播放器的控件是去不了的 。其实似乎确实是这样的 , 但你看了故宫穿越H5 , 和吴一凡那个H5后 , 会发现 , 在下 , 也是没有控制条的 。最初看到那些H5视频我首先并没有去看他们的内容多么新颖 , 传播量多么广 , 我是第一时间测试了下的兼容问题 , 发现并没有出现控制条 。在我研究半天未果时 , 在一篇技术帖中看到说:因是腾讯自己的项目 , 微信是腾讯自己的 , 他们在浏览器里做了一些配置 , 对旗下出品的H5有所“优待” , 才能确保视频的顺利“乔装” 。
上面的说法我并没有真正核实过 , 但好像是这么回事 , 非常有幸我做的那个视频项目也是腾讯的 , 其实是有机会可以向他们证实一下以上说法的 , 但即使是这样的 , 也只有腾讯的项目有这样的解决办法 , 对于广大的开发者来说似乎并太不公平 , 我试图找到一种解决去除播放控件的解决方案 , 下面是我花了很多心思找到的一种解决办法 , 看似很简单也不那么高大尚 , 但确实解决了问题 , 跟大家分享:

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

文章插图

初始样式表如下:
html,body {padding: 0;margin: 0;width: 100%;height: 100%;-webkit-user-select: none; user-select: none;overflow: hidden;}.videobox {width: 100%;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;}video {width: 1px;display: blcok;}/*注:html , body里的overflow:hidden , 非常重要 , 不能省 。因为微信android的播放器是脱离DOM结构的 , 也不会响应click、touch等事件 。如果视频尺寸大了 , 会产生滚动条 , 必须在html和body加overflow:hidden , 在videobox加没用的 。*/
当视频要播放时改变video的宽度(高度会等比缩放 , 即使自定义高度也是没用的 , 会被忽略)
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%,或者更大;这个根据自己的需要来 , 但基本思路就是将播放器控件顶出视窗之外 , 达到一种‘去除’、‘消失’的效果 。连‘小窗’字样也被顶出去了 , 用过或测试过的同学都知道点了小窗后会怎样....(原版的即使去掉了播放器 , 但小窗字样还在 , 不能算完全的隐藏播放控件吧)