android下html5的视频播放一直是前端兼容的重灾区，种种体验差，被诟病已久。但之前的故宫穿越H5，和吴亦凡参军H5，应用的视频手艺，貌似又给人一种新面貌。
前段时刻做某项目，正好也是一个相似视频全屏的，下面跟人人分享下阅历的坑和填坑的要领。
ios端题目实在没什么，基础都在android端，基础每个带有视频的项目都邑碰到的，固然有特别需求的发生的状况另说了就，题目主要有几个方面：
- 全屏处置惩罚；
- 自动播放；
- 播放掌握；
- 隐蔽播放控件；
video全屏的处置惩罚
这个实在不难，只需在video标签加个webkit-playsinline属性即可，这个属性基础上在基于webkit内核的挪动端都是没题目标，此全屏非彼全屏，它是在阅读器视窗内的全屏，并非占居全部手机的全屏，固然我们做web端须要的就是在document的body内的视窗局限的全屏。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
在ios下，视频被嵌入后，媒体的元数据加载完成后，会以全屏的情势显现出来，或许加个poster，能够看到画面。但在android下，多半机子是不显现视频画面的，要不就是显现一个黑色的还不是全屏的播放控件，纵然及加个poster封面也不济因而。因为poster在android兼容的并不好，不如在视频上层加个div浪费图片，这个比较好的处置惩罚体式格局应该是：视频上加一层div做封面，因为android不允许视频上层有东西，所以起首将视频设为的width：1px，当播放后，上层的封面remove掉，同时width：100%或许你想要的宽度。
video的自动播放
这个的话就不多说了，置信人人跟我一样，试图寻觅android下，页面加载终了就能够自动播放，但现实是严酷的，android下是不允许自动播放的，纵然你用了video.play(),也是不可的。必须有用户的主动触发，比方触摸了屏幕，有click或touch事宜发生。不知今后android会不会革新，但最少如今来看是不可的。比较的好的要领是，指导用户触发，滑屏或touch的行动，然后挪用video.play()播放，给用户一个自动播放的错觉。
video播放的掌握
关于video或许audio等媒体元素，有一些要领，经常运用的有play(),pause();也有一些事宜，如’loadstart’,’canplay’,’canplaythrough’,’ended’,’timeupdate’…..等等。
在挪动端有一些坑须要注重，不要随意马虎运用媒体元素的除’ended’,’timeupdate’以外event事宜，在差别的机子上可能有差别的状况发生，比方：
ios下监听’canplay’和’canplaythrough’（是不是已缓冲了充足的数据能够流通播放）,当加载时是不会触发的，纵然preload=”auto”也没用，但在pc的chrome调试器下和android下，是会在加载阶段就触发。ios须要播放后才会触发。
总之就是如今的视频规范还不尽完美，有许多坑要注重，要运用前最好本身亲测一遍。
关于掌握的题目还想说一点就是android在播放视频时会有个控件初始化的历程，在全屏视频想假装成非视频时，是我们很不想看到的，我的处理思绪是如许：
在我们须要播放时提早初始化它，即须要播放的时刻前先设width:1px;然后play()一下，使视频已播放初始化。然后再须要播放的时刻再次play()时就不会发生，控件拉伸的状况了。
“去除”android下的播放控件条
重头戏来了，置信这个这个题目已搅扰无数的前端开发人员，再征采这个题目标处理要领时，险些一切的文章都是通知你android下，播放器的控件是去不了的。实在彷佛确切是如许的，但你看了故宫穿越H5，和吴一凡谁人H5后，会发明，在android下，也是没有掌握条的。最初看到那些H5视频我起首并没有去看他们的内容何等新鲜，传播量何等广，我是第一时刻测试了android下的兼容题目，发明并没有涌现掌握条。在我研讨半天未果时，在一篇手艺帖中看到说：因是腾讯本身的项目，微信是腾讯本身的，他们在阅读器里做了一些设置，对旗下出品的H5有所“厚待”，才确保视频的顺遂“乔装”。
上面的说法我并没有真正核实过，但彷佛是这么回事，异常有幸我做的谁人视频项目也是腾讯的，实际上是有时机能够向他们证明一下以上说法的，但纵然是如许的，也只要腾讯的项目有如许的处理要领，关于宽大的开发者来讲彷佛并太不平正，我试图找到一种处理去除播放控件的处理方案，下面是我花了许多心机找到的一种处理要领，看似很简单也不那么嵬峨尚，但确切处理了题目，跟人人分享：
我这里只看android的状况，ios基础没什么题目，就疏忽啦。
测试机android版本：5.1
起首我们将谁人H5视频地点嵌入本身的页面，你会发明确切播放器涌现了。以下
图片形貌
怎么办呢，不是腾讯本身的项目就没要领了嘛？再我搜了N多材料未果后，发明了一个细节，掌握条一直是最下方的，可不能够让视频的尺寸放大些，将掌握条顶到阅读窗口表面，就看不到了嘛，因而我将视频宽高放大到120%—–控件条奇异的‘消逝’了（实际上是顶到视窗表面了），惊喜万分啊。
详细思绪和完成以下：
html中将video标签外包一层，
<div class="videobox">
<video id="mainvideo" webkit-playsinline="true" src="http://7xvl2z.com1.z0.glb.clouddn.com/nigg2.mp4"></video>
</div>初始样式表以下：
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%,或许更大；这个依据本身的须要来，但基础思绪就是将播放器控件顶出视窗以外，到达一种‘去除’、‘消逝’的结果。连‘小窗’字样也被顶出去了，用过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/bfred-it/i…，加上playsinline webkit-playsinline这两个属性和这个库基础能够保证ios端没有题目了（不过亲测，只加这两个属性不引入库彷佛也是ok的，至今没有在ios端微信没有涌现题目，假如你要兼容uc或许qq的阅读器发起带上这个库），
末了引见个新的x5-video-player-type=”h5″属性，腾讯x5内核系的android微信和手Q内置阅读器用的阅读器webview的内核，运用这个属性在微信中视频会有差别的表现，会显现全屏状况，貌似播放控件剥去了，最少加了这个属性后视频上层能够有其他dom元素涌现了（非腾讯白名单机制的一种处置惩罚步伐），
<video id="mainvideo" src="test.mp4" playsinline webkit-playsinline></video>
补充–自动播放
android一直不能自动播放，不多说。值得一提的是经测如今ios10后版本的safari和微信都不让视频自动播放了（顺带音频也不能自动播放了），但微信供应了一个事宜WeixinJSBridgeReady，在微信嵌入webview全局的这个事宜触发后，视频仍能够自动播放，这个应该是如今在ios端微信的视频自动播放的比较靠谱的体式格局，其他如手q或许其他阅读器，发起就指导用户动身触屏的行动操纵动身比较好。
//也能够在这个事宜触发后播放一次然后停息（如许今后视频会处于加载状况，为背面的流通播放做准备）
document.addEventListener("WeixinJSBridgeReady", function (){
video.play();
video.pause();
}, false)
补充–播放掌握
关于掌握，这里仅补充一点吧，就是当第一次播放视频的时刻ios端，假如收集慢，视频从最先播到能展示画面会有短暂的黑屏（处置惩罚视频源数据的时刻），为了防止这个黑屏，能够在视频上加个div浮层（能够一个假的视频第一帧），然后用timeupdate要领监听，视屏播放及有画面的时刻再移除浮层
video.addEventListener('timeupdate',function (){
//当视频的currentTime大于0.1时示意黑屏时刻已过，已有视频画面，能够移除浮层（.pagestart的div元素）
if ( !video.isPlayed && this.currentTime>0.1 ){
$('.pagestart').fadeOut(500);
video.isPlayed = !0;
}
})
补充–隐蔽播放控件
听说腾讯的android团队的x5内核团队放开了视频播放的限定，视频不一定挪用它们谁人备受诟病的视频播放器了，x5-video-player-type=”h5″属性这个属性彷佛就有点谁人意义，虽然体验照样有点…（导航栏也会清算）但最少播放器控件没有了，上层能够浮div或许其他元素了，这个照样值得一提。
另有一点值得说的是，带播放器控件的隐蔽，
<div class="videobox" ontouchmove="return false;">
<video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>
比方这个videobox在android下隐蔽，只用display：none貌似照样不可的，但加个z-index:-1，设置成-1就能够到达隐蔽播放器控件的目标了。这个经测可用且好用，能够一试。
好了就先补充能想到要说的这么多吧，愿望对人人有协助
