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

地址：https://blog.csdn.net/xiao190128/article/details/81025378

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终端
if(isAndroid){
$('.videoBox').hide();
$('.section').css({"background":"url({$_W['siteroot']}addons/db_play/template/mobile/resource/bg_img.jpg)","background-repeat":"no-repeat","background-size":"100% 100%","-moz-background-size":"100% 100%"});
console.log(1);
$("#video").hide();
// $("i.fa").show();
$("i.fa").hide();

}else{
$("i.fa").hide();
$("#canvas").hide();
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('video').play();
}, false);
}

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="{$_W['siteroot']}addons/db_play/template/mobile/image/share/STARVOICE.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帧渲染页面。关于此方法具体解释请自行百度。
}

if (video.paused) {
$('.videoBox').show();
$('.section').css({"background":""});
}

$("#canvas,i.fa").click(function(){

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