地址：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();//新建一個(gè)圖片，模仿video里面的poster屬性。
img.src="{$_W['siteroot']}addons/db_play/template/mobile/image/share/STARVOICE.png";
context.drawImage(img,0, 0,canvas.width,canvas.height);//將圖片繪制進(jìn)canvas。
function animate() {//渲染方法。
if(video.paused){//判斷視頻是否暫停，如果暫停顯示控件。
$(".video i.fa").show();
}
context.drawImage(video,0, 0,canvas.width,canvas.height);//將視頻當(dāng)中的一幀繪制到canvas當(dāng)中。
videoanimate = requestAnimationFrame( animate );//每秒60幀渲染頁面。關(guān)于此方法具體解釋請自行百度。
}

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

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

console.log(2);
if(isAndroid){
animate();//在這里調(diào)用。
if(!video.paused){//判斷視頻時(shí)候暫停。
video.pause();
}else{
video.play();
$(".video i.fa").hide();
}
}
})

轉(zhuǎn)載于:https://www.cnblogs.com/peipeiyu/p/10007337.html

總結(jié)

以上是生活随笔為你收集整理的《转》完美解决微信video视频隐藏控件和内联播放问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。