解决微信浏览器内video全屏问题
前端离职,让我写个视频播放页面,木办法只有我来搞了。
默认用h5的 video标签 测试时候发现微信浏览器内访问video自动全屏播放。
搜了下
webkit-playsinline="true" playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-ignore-metadata="true"
video内加如下属性可以解决ios全屏问题。但是安卓还是不行。网上说是安卓的用了x5内核啥的乱七不糟的,反正微信安卓浏览器对video做了限制了。
然后怎么办呢?想到用 canvas (最近做h5视频推流相关业务接触到的,里面有个jsmpeg视频解码插件)然后 jsmpeg (英文不好的可以用chrome的翻译功能帮你翻译这个地址)看了下说明。
要把视频转换为ts格式 又要用到 ffmpeg。转码mp4 为ts格式。(还好之前自己稍稍的研究过这个ffmpeg。不然要崩溃了。扯的太远了)
不管怎么样,还是有点崩溃。。。太费事了
首先利用ffmpeg转文件格式为 ts格式(ffmpeg这个安装我之前研究安装过,大家可以百度搜到,这里不细说,主要这个东西太复杂我也不咋深入了解)。命令如下
ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -s 960x540 -b:v 500k -r -bf -codec:a mp2 -ar -ac -b:a 128k out.ts
其中1.mp4是原视频文件名称,out.ts是要转换成的视频名称,-r 25 意思是视频帧率是25(这里我设置的和原视频一样,原视频的这个参数可以用一些播放软件查看到它的编码信息,比如qq影音)-b:v 是指视频码率 越大越清晰(尽量小点,不然文件太大了,我这里设置了500k,清晰度还行) -s是分辨率,
上面做这些是因为 这句 jsmpeg git上的这句话 “JSMpeg只支持MPEG1视频编解码器和MP2音频编解码器的MPEG-TS容器播放”;还有一点ts文件可以带声音
生成后把此文件放到同你当前业务域名下的某个目录里(非当前域名的ts文件地址在用jsmpeg的时候会报跨域错误,应该jsmpeg里用到了post导致,不细究)
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="/jsmpeg.min.js"></script>
<script>
var canvas = document.getElementById('video-canvas');
var url = '/share/image/500p2.ts';
var player = new JSMpeg.Player(url, {canvas: canvas);
</script>
上面是jsmpeg的基本使用方法
到这里解决了,微信安卓浏览器的问题了。
——————————————————————————————————————————————————————————————
操蛋的是,ios上又播放不了声音,实在不想搞了,程序判断下内核,是安卓 的微信浏览器 用canvas方式的模板,其他一律用video方式的模板。
更操蛋的是,好不容易基本解决的时候,发现 各种Oppo uc等等浏览器又出现一些小兼容问题。先到这里,待有空了再来细究。。。。
最新文章
- JS的Object漫想:从现象到“本质”
- Kerberos简介
- WebRTC
- 加jdk语句
- git windows中文目录乱码问题解决
- js获取随机色
- ELF学习--可执行文件
- epmap服务
- UIcollectionView的使用(首页的搭建4)
- Linux 共享内存编程
- linux中history命令使用与配置
- POJ Oulipo (KMP)
- HDU 5172 GTY&#39;s gay friends 线段树
- 【JAVA零基础入门系列】Day7 Java输入与输出
- js promise看这篇就够了
- hdu5701-中位数计数
- day15(PYTHON)推导式{生成器,字典,列表,集合}
- 缓存淘汰算法---LRU转
- [LeetCode] 23. Merge k Sorted Lists ☆☆☆☆☆
- PostgreSQL内部结构与源代码研究索引页
热门文章
- leetcode-第10周双周赛-5099验证回文字符串③
- 软件设计师_C语言基础
- redis:info详解
- 在VC中使用WebBrowser控件的两方法
- iOS之SceneKit.h文件简介
- typedef void (*funcptr)(void) typedef void (*PFV)(); typedef int32_t (*PFI)();
- Sequelize
- PAT甲级——A1125 Chain the Ropes【25】
- spring mvc文件上传报错:Expected MultipartHttpServletRequest: is a MultipartResolver configured?
- Django之13种必会查询