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

概述众所周知，微信浏览器下的html5视频播放兼容性一直是很头疼的问题，其中两个最主要的问题是隐藏播放控件和内联播放，在ios系统下这两个功能还比较好实现，重点是在android端，今天就给大家提供一个比较特殊的方法。 先看一下html代码格式： <div class="videoBox"> <i class="fa fa-play-circle-o"></i> <video id="video" x

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

先看一下HTML代码格式：

<div >
<i ></i>
<vIDeo ID="vIDeo" x5-vIDeo-player-type="h5" x5-vIDeo-player-fullscreen="true" x-webkit-airplay="allow" webkit-playsinline playsinline poster="vIDeo.png" src="vIDeo.mp4"></vIDeo>
<canvas ID="canvas" wIDth="1920" height="1080"></canvas>
</div>

其中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,canvas.wIDth,canvas.height );//绘制1920*1080像素的已填充矩形。var img=new Image();//新建一个图片，模仿vIDeo里面的poster属性。img.src="vIDeo.png";context.drawImage(img,canvas.height);//将图片绘制进canvas。function animate() {//渲染方法。 if(vIDeo.paused){//判断视频是否暂停，如果暂停显示控件。 $(".vIDeo i.fa").show(); } context.drawImage(vIDeo,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视频隐藏控件和内联播放问题全部内容，希望文章能够帮你解决完美解决微信video视频隐藏控件和内联播放问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。