完美解决微信video视频隐藏控件和内联播放问题

众所周知，微信浏览器下的html5视频播放兼容性一直是很头疼的问题，其中两个最主要的问题是隐藏播放控件和内联播放，在ios系统下这两个功能还比较好实现，重点是在android端，今天就给大家提供一个比较特殊的方法。

先看一下html代码格式：

<div class="videoBox">
<i class="fa fa-play-circle-o"></i>
<video id="video" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" webkit-playsinline playsinline poster="video.png" src="video.mp4"></video>
<canvas id="canvas" width="1920" height="1080"></canvas>
</div>

其中i标签是boostrap一个视频暂停icon，在这里是andriod自定义暂停控件。然后是video标签中的属性：
x5-video-player-type=”h5”，x5-video-player-fullscreen=”true”—这两个属性是叫做“同层播放器”，是微信andriod端特有的属性，有关这两个属性的文章请参考这里。
webkit-playsinline=”true”—这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放。
playsinline=”true”—ios微信浏览器支持小窗内播放。
因为没有加上controls属性，所以在ios端是没有播放控件的，如果在播放过程中想用到播放控件，可以在js中动态添加。

接下来是重点！也就是canvas标签：作用是将android端视频渲染到canvas，这样一来video标签的所有问题全部屏蔽。
canvas属性：width=”1920”，height=”1080”—大部分视频都是这个分辨率，如果不设置的话视频清晰度会降低或者失真。

接下来是js实现：
首先判断终端：

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

andriod下：

if(isAndroid){
$("#video").hide();
$("i.fa").show();
}else{
$("i.fa").hide();
$("#canvas").hide();
}

video标签隐藏，自定义暂停控件显示；反之如果是ios端自定义控件和canvas标签隐藏。
1
接下来是canvas的绘制：

var videoanimate;
canvas = document.getElementById('canvas');
context = canvas.getContext( '2d' );
context.fillStyle = '#fff';
context.fillRect( 0, 0, canvas.width, canvas.height );//绘制1920*1080像素的已填充矩形。
var img=new Image();//新建一个图片，模仿video里面的poster属性。
img.src="video.png";
context.drawImage(img,0, 0,canvas.width,canvas.height);//将图片绘制进canvas。
function animate() {//渲染方法。
if(video.paused){//判断视频是否暂停，如果暂停显示控件。
$(".video i.fa").show();
}
context.drawImage(video,0, 0,canvas.width,canvas.height);//将视频当中的一帧绘制到canvas当中。
videoanimate = requestAnimationFrame( animate );//每秒60帧渲染页面。关于此方法具体解释请自行百度。

$("#canvas,i.fa").click(function(){
if(isAndroid){
animate();//在这里调用。
if(!video.paused){//判断视频时候暂停。
video.pause();
}else{
video.play();
$(".video i.fa").hide();
}
}
})