眾所周知，微信瀏覽器下的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();
}
}
})