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

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

概述众所周知,微信浏览器下的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视频隐藏控件和内联播放问题所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1121421.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存