地址：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();

}

}

})