标签：定义   暂停   填充   参考   UNC   var   nim   ext   roi

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

先看一下html代码格式：

其中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();

}

}

})

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

标签：定义   暂停   填充   参考   UNC   var   nim   ext   roi