《轉》完美解決微信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();
}
}
})