完美解决微信video视频隐藏控件和内联播放问题
来源:互联网 发布:2001太空漫游小说知乎 编辑:程序博客网 时间:2024/06/05 15:43
众所周知,微信浏览器下的html5视频播放兼容性一直是很头疼的问题,其中两个最主要的问题是隐藏播放控件和内联播放,在ios系统下这两个功能还比较好实现,重点是在android端,今天就给大家提供一个比较特殊的方法。
先看一下html代码格式:
<div class="videoBox"> <i class="fa fa-play-circle-o"></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标签隐藏。
接下来是canvas的绘制:
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="video.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帧渲染页面。关于此方法具体解释请自行百度。}
$("#canvas,i.fa").click(function(){ if(isAndroid){ animate();//在这里调用。 if(!video.paused){//判断视频时候暂停。 video.pause(); }else{ video.play(); $(".video i.fa").hide(); } }})
大致代码就这样,如有疑问请留言。
阅读全文
0 0
- 完美解决微信video视频隐藏控件和内联播放问题
- Video.js视频播放控件
- 关于微信浏览器video标签无法播放mp4视频
- 微信分享问题完美解决
- 解决视频在微信公众平台中无法播放的问题(python实现)
- 微信视频播放
- 解决微信浏览器video全屏的问题
- html5 Video控件视频播放,电脑和手机上都能兼容。(mp4格式 电脑和android、ios都能播放)
- 解决微信h5页面视频播放的部分大坑
- 微信开发H5 video 视频在ios可以播放但是在android手机上无法播放或者黑屏
- Android Webview完美支持播放各种视频。(解决无法播放优酷视频的问题以及周末无法播放优酷视频的问题)
- 视频播放- video标签
- video 播放视频
- html5-video视频播放
- video实现视频播放
- video.js播放视频
- 网页 video视频播放
- Android Video视频播放
- 大端和小端的判断方法
- JDBC和JDBCtemplate区别
- Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
- spring boot devtools 配置无效
- 三步搭建Python可视化开发环境
- 完美解决微信video视频隐藏控件和内联播放问题
- SpringBoot开发Junit单元测试方法
- 为什么要使用 BigDecimal
- 简单实现手机号验证码注册功能
- Net-snmp总结(六)-net-snmp源码分析
- 树状数组 详解
- Projection of Bumpy Surfaces凹凸曲面投影
- 图像处理的变分法研究(1)——11月第一阶段进展报告
- django gunicorn启动配置