html5中video在安卓与ios实际应用中碰到的难题及解决

昨天公司指派给我了一个任务，是关于视频播放后展现页面的单页应用，具体需求如下：

1）用户在进入页面后视频开始自动播放，期间不得操作；
2）视频播放完成后顺滑切换到主体页。

看起来是不是特别简洁粗暴，乍一看好像只是就是不到一小时的工作量，却让我足足熬到了深夜两点钟，说起来都是泪~~。这期间遇到了不少问题，我就会在上面一一列出（以下所说的浏览器均为移动端浏览器，不再一一标注）。

在我开发完基本代码以后，push到githook上在手机上展示时，遇到了第一个问题：

众所周知，html中video的autoplay在移动端浏览器上基本失效（其一微信浏览器 video标签，移动端要有客户交互才能触发事件，如click、touch；其二，ios协议蜂窝数据下不得开启音视频的自动播放），所以我在加载后取巧的加了一个悬浮播放界面，引导客户点击开始业务流程。

但也许由于内核不同，在微信浏览器/safari/chrome上默认展示的poster各有不同，chrome应用了默认行为截取了视频第一帧作为显示，微信浏览器和safari却显示空白，效果就是孤零零的播放图放到一张白纸上。解决方案是：通过canvas截取视频第一帧作为默认显示的截图：

var cut = function() {
    let canvas = document.createElement("canvas");//创建画布
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;//设定宽高比
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//将视频此刻帧数画入画布
    let img = document.createElement("img");
    img.src = canvas.toDataURL("image/png");
    Dom.appendChild(img);//写入到Dom
};
video.addEventListener('loadeddata',cut);//在视频帧数已加载时执行截取

html文档里写有，如果controls属性不出现，则默认不显示，但毕竟在实际应用中，浏览器一般都是调用默认播放器进行播放，再加上双端差异，实际展现效果更是精彩纷呈。说到这里，要写一下目前各个浏览器的内核情况：

微信浏览器

微信6.1版本以下的android用户，都是使用的QQ浏览器的X5内核。

5.4-6.1之间的版本，若用户加装了QQ浏览器就是使用的X5内核，若用户未安装浏览器，使用的是平台内核。

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="img/movie.ogg" type="video/ogg">
    您的浏览器不支持该视频格式。
</video>

webkit-playsinline playsinline：这个属性作用是让视频播放时局域播放（不全屏，在原有位置上播放），不摆脱文档流 。但这个属性必须嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = 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="img/movie.ogg" 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="img/movie.ogg" type="video/ogg">
        您的浏览器不支持该视频格式。
    </video> 
</div>

这样就实现了播放时不得操作的需求。

这就牵扯到两个个问题，我们分开来说。

video标签对视频格式或者编码的支持

如上所示，只有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="img/movie.ogg" 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)

笔记到这儿就结束了微信浏览器 video标签，如果在文章里有什么漏洞和出错，望您不吝赐教

原文链接：

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-126156-1.html