html5中video在安卓与ios实际应⽤中遇到的问题及解决
昨天公司指派给我了⼀个任务，是关于视频播放后展⽰页⾯的单页应⽤，具体需求如下：
1）⽤户在进⼊页⾯后视频开始⾃动播放，期间不得操作；
2）视频播放完成后顺滑切换到主体页。
看起来是不是特别简单粗暴，乍⼀看好像也是就是不到⼀⼩时的⼯作量，却让我⾜⾜熬到了深夜两点钟，说起来都是泪~~。这期间遇到了不少问题，我都会在下⾯⼀⼀列举（以下所说的浏览器均为移动端浏览器，不再⼀⼀标注）。
⼀、video的默认显⽰
在我开发完基本代码之后，push到githook上在⼿机上展⽰时，遇到了第⼀个问题：众所周知，html中video的autoplay在移动端浏览器上基本失效（其⼀，移动端要有⽤户交互才能触发事件，如click、touch；其⼆，ios协议蜂窝数据下不得开启⾳视频的⾃动播放），所以我在加载后取巧的加了⼀个悬浮播放图标，引导⽤户点击开始业务流程。
但可能因为内核不同，在浏览器/safari/chrome上默认展⽰的poster各有不同，chrome应⽤了默认⾏
为截取了视频第⼀帧作为显⽰，浏览器和safari却显⽰空⽩，效果就是孤零零的播放图放在⼀张⽩纸上。解决⽅案是：通过canvas截取视频第⼀帧作为默认显⽰的图⽚：
var cut = function() {
let canvas = ateElement("canvas");//创建画布
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;//设定宽⾼⽐
let img = ateElement("img");
img.src = DataURL("image/png");
Dom.appendChild(img);//写⼊到Dom
};
video.addEventListener('loadeddata',cut);//在视频帧数已加载时执⾏截取
box sizing⼆、video控制栏的隐藏
html⽂档⾥写有，如果controls属性不出现，则默认不显⽰，但其实在实际应⽤中，浏览器⼀般都是调⽤默认播放器进⾏播放，再加上双端差异，实际展⽰效果更是精彩纷呈。说到这⾥，要写⼀下⽬前各个浏览器的内核情况：
浏览器
安卓
6.1版本以上的android⽤户，都是使⽤的QQ浏览器的X5内核。 5.4-6.1之间的版本，若⽤户安装了QQ浏览器就是使⽤的X5内核，若⽤户未安装浏览器，使⽤的是系统内核。
IOS
Webkit。
⼤部分⼿机浏览器
Webkit。（UC的U3内核和X5内核⼀样，是基于webkit修改的内核）。
由上可知，在移动端开发遇到的百分之九⼗的问题，都是系统和机型问题。
我们回到问题本⾝，在使⽤htmlvideo标签时，我们会发现，点击播放之后⾸先会进⼊播放器占⽤整个屏幕，之后开始播放，再次点击视频会出现控制栏。
好，捋⼀捋思路。第⼀步，要解决脱离屏幕的播放问题。
<video poster="img/test.jpg" webkit-playsinline="true" playsinline>
<source src="img/movie.mp4" type="video/mp4">
<source src="" type="video/ogg">
您的浏览器不⽀持该视频格式。
</video>
webkit-playsinline playsinline：这个属性作⽤是让视频播放时局域播放（不全屏，在原有位置上播放），不脱离⽂档流。但这个属性需要嵌⼊⽹页的APP⽐如WeChat中UIwebview 的allowsInlineMedia
Playback = YES webview.allowsInlineMediaPlayback = YES，才能⽣效。换句话说，安卓不⽀持，⽽IOS的wechat却⽀持，因为APP不⽀持playsinline，所以安卓是默认全屏播放的。
第⼆步，隐藏掉控制栏。
<video x5-video-player-type="h5" id="video">
<source src="img/movie.mp4" type="video/mp4">
<source src="" type="video/ogg">
您的浏览器不⽀持该视频格式。
</video>
x5-video-player-type='h5' 启⽤同层H5播放器，学名叫沉浸式播放。播放的时候除去了control和的导航栏，只留下"X"和"<"两键。
⼀般来说，这种已经⾜够‘沉浸’了，但项⽬对定制化要求⽐较⾼，要求这种也不要出现。我苦思冥想，查了好多⽂档，⽅法却都⼤同⼩异。直到最后灵光⼀闪，放弃了通过属性或⽅法来限制的思路，决定⽤视觉遮挡来实现效果：
将video的控制栏挤出可视区域，不就相当于隐藏了控制栏嘛。
/*这是CSS*/
html,body,.main{
width: 100%;
height: 100%;
overflow: hidden;//隐藏
background: #FFF;
box-sizing:border-box;
}
.videobox{
z-index: 12;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#video{
position: absolute;
top: -2%;
width: 100%;
height: 110%;
}
<!--这是HTML-->
<div class="videobox" ontouchmove="return false;">
<video poster="img/test.jpg" webkit-playsinline="true" playsinline x5-video-player-type="h5" x-webkit-airplay="true" id="video">
<source src="img/movie.mp4" type="video/mp4">
<source src="" type="video/ogg">
您的浏览器不⽀持该视频格式。
</video>
</div>
这样就实现了播放时不得操作的需求。
三、IOS当视频被打开在safari浏览器时播放⽩屏。
这就牵扯到两个个问题，我们分开来说。
video标签对视频格式以及编码的⽀持
MPEG4 = 带有H.264视频编码和AAC⾳频编码的MPEG4⽂件
WebM = 带有VP8视频编码和Vorbis⾳频编码的 WebM⽂件
Ogg = 带有Theora视频编码和Vorbis⾳频编码的Ogg⽂件
如上所⽰，只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以⽀持html5的<video>标签。
那么在实际代码上我们应该这么布置：
<video poster="img/test.jpg" webkit-playsinline="true" playsinline x5-video-player-type="h5" x-webkit-airplay="true" id="video">
<source src="img/movie.mp4" type="video/mp4">
<source src="" type="video/ogg">
您的浏览器不⽀持该视频格式。
</video>
⾸先会判断是否⽀持MP4，如否，判断是否⽀持OGG，如否，展⽰⽂字。这也是我最后选择的解决⽅式，简单粗暴可以早睡觉 :)。
备注：⽹上有⽂章说，⽤格式⼯⼚将mp4编码转成H264即可，但我实际应⽤中发现H264在safari和chrome中竟然⽆法打开，具体原因究竟是我编码错误还是与⽂档冲突，暂未知晓。
iOS上播放视频，http协议中应⽤rang请求头
视频格式MP4是正确的，但是你的后台没有对ios的视频播放器做适配。如果想要在iOS上播放视频，那么必须在http协议中应⽤rang请求头。
对于有的朋友还对ios播放器http的range标记不是很懂。我再讲解下。
视频⽂件总长度是123456789
range是播放器要求的区间也就是客户端发送请求的时候http会带有这个标记，这个区间的值在http.headers.range中获取，⼀般是bytes=0-1这样的。
我们需要做的处理是返回⽂件的指定区间（如上⾯的例⼦，我们就应该返回0到1的字符），并添加
Content-Range:btyes 0-1、Accept-Ranges:bytes、'Content-Length: 123456789'，'Content-Type: video/mp4'到http.headers中
具体效果因为时间关系并没有亲⾃测试，有兴趣的朋友可以研究⼀下。
四、关于其他属性的补充
让你的视频充满屏幕。
#video{
object-fit: fill;
}
把当前的视频投放到其他⽀持此技术的设备上。
<video x-webkit-airplay="true"></video>
在视频结束时执⾏事件。
$("#video").get(0).addEventListener("ended", function() {
}, false);
浏览器下实现⾃动播放。
document.addEventListener("WeixinJSBridgeReady", function() {
video.play()
}, false)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论