H5 播放视频常见bug及解决方案

本文摘自：本文来自“小时光茶社（Tech Teahouse）”公众号

原文：https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw

1. 自动播放问题

经过autoplay属性
视频的自动播放须要在video标签上添加autoplay属性, 如：

 <video autoplay><video/>

可是在不少浏览器里，如iOS下并不支持这个属性，在iOS下必须给webview设置：

self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;

才能让这个属性生效从而让用户一进入页面就开始视频的自动播放。

 

经过直接调用video.play()方法
在一些状况下咱们想加入一些判断逻辑，如判断用户网络环境，在wifi下自动播放，在4g环境下给出提示，这中状况下就适合直接选中video并调用video.play来播放视频；

 

可是这种状况下也须要webview的支持，如在手Q下能够作到直接调用，在微信下由于不容许视频直接播放，则必须经过用户的真实操做来触发调用 video.play() 这就是各类微信的h5活动页面须要引导用户进行一下点击操做才开始的缘由。

同时发现真实点击必须使用触发 touchend、click、doubleclick 或 keydown 事件等标准的事件才能触发，使用Zepto封装过的tap事件并不能触发播放器的播放;

 

2. 页面内联播放问题

在iOS Safari和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频;

若是须要在h5页面内播放视频，须要在视频标签上加上  webkit-playsinline ,在iOS10之后，须要加上 playsinline ,建议同时加上这两个属性，同时须要app支持这种模式，手Q和微信都支持这种模式;

 

3. 视频的高度问题

在安卓下，一些浏览器如QQ浏览器和UC浏览器，系统会把视频的层级调到最高，因此若是想在页面上显示dom元素，都会被视频盖住，单纯的设置该dom的z-index是无效的;

解决方案：
1.在弹出会显示在视频上方dom的时候暂停视频播放
2.将视频所在的dom的父元素的高度设为1
3.处理完弹出的事件后将视频所在的父元素高度还原

4. 视频的默认播放图标

在iOS下会有一个默认的播放图标，如图所示:

 

在iOS都会默认显示，不能经过js控制，可是能够经过css样式将其隐藏

video::-webkit-media-controls-start-playback-button {
   display: none;
}

 

5.视频的刷新

咱们知道video暴露了play和pause方法来提供视频的播放和暂停，可是h5没有标准的刷新方法，若是咱们想实现视频的刷新，则须要经过js实现

var player = $('#player')[0];
player.load();
setTimeout(function () {
     player.play();
})

 

6.视频的全屏问题

(1)全屏API

h5暴露了一个webkitRequestFullScreen方法，可让每一个dom都请求全屏，固然video标签也能够使用。
可是在测试中发现，一些安卓机不支持该属性，如小米手机，因此须要在调用的时候进行一下判断

 

var player = $('#player')[0];if (player.webkitSupportsFullscreen) {
    player.webkitEnterFullscreen();
} else {
   player.webkitRequestFullScreen();
}

(2)系统接管播放

咱们上边说道调用h5的webkitRequestFullScreen方法来进入视频的全屏，那么这个方法会使浏览器彻底接管视频播放，如图所示

这种接管的后果是这时的咱们是没有办法控制视频的播放，也没有办法在上面浮动咱们的dom元素，如弹幕，礼物这些，会彻底被视频盖在下面，因此咱们的目标便是解决这种系统接管的问题

(3)使用伪全屏（样式全屏）

 样式全屏的核心是设置video标签的宽高，使其撑满整个webview，看上去像全屏同样可是由于视频通常都是16:9的宽高比，因此在竖屏状况下不能很好的作到铺满整个屏幕

而通常用户进入页面基本都是竖屏，因此咱们就要考虑怎么让用户在竖屏点击全屏按钮时，能体验到像终端app同样自动进入横屏全屏的体验，下面有两种方案：

1.在用户点击全屏时候，经过css3属性旋转屏幕

经过css的transform，咱们能够把dom元素旋转显示经过 -webkit-transform: rotate(90deg) 并设置video的高度为当前webview的宽度，video的宽度为当前webview的高度来实现旋转全屏。

这种模式的显示没有太大问题，但由于是经过css控制的页面dom显示，对于原生的空间不能很好的控制，如系统的键盘

 在拉起键盘输入弹幕的时候，键盘不受控制仍是竖屏显示了若是页面不涉及与原生组件的交互，那么这种方案是一种很可行且兼容性比较好的方案

2.用户在点击全屏时，经过js api来控制webview旋转横屏

在手Q里，咱们和终端的同窗合做添加了控制webview横竖屏的接口
在用户点击全屏的时候，先判断当前是否横屏

 

/*
 * 是否横屏
 */
 function isHorizontal() {       
     if (window.orientation != undefined) {        
         return (window.orientation == 90 || window.orientation == -90);
     } else {         
         return window.innerWidth > window.innerHeight;
     }
 }
    
    
 //设置webview为横竖屏
 mqq.ui.setWebViewBehavior({         
     orientation: 0 //0是竖屏，1是横屏
 });

若是是竖屏则强制webview旋转进入横屏，同时监听页面的resize方法，页面横竖屏变化的时候会触发这个方法，在这个方法里再动态的调整video的宽高来铺满整个屏幕

若是发如今x5内核下没法使用伪全屏而被浏览器接管，能够咨询下x5同事为你的域名开启白名单，不接管你域名下的视频播放

 

如今的h5的播放还有不少的表现和兼容性的问题，但愿这份指南能够帮你在遇到一样的坑时能尽快爬出来，并优化你的h5播放体验，吸引到更多的用户