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

21,626 阅读7分钟

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

1)用户在进入页面后视频开始自动播放,期间不得操作;

2)视频播放完成后顺滑切换到主体页。

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

一、video的默认显示

在我开发完基本代码之后,push到githook上在手机上展示时,遇到了第一个问题: 众所周知,html中video的autoplay在移动端浏览器上基本失效(其一,移动端要有用户交互才能触发事件,如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);//在视频帧数已加载时执行截取

二、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="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>

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

三、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="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)

笔记到这里就结束了,如果在文章里有哪些纰漏和错误,望您不吝赐教

END