解决微信浏览器内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 25 -bf 0 -codec：a mp2 -ar 44100 -ac 1 -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等等浏览器又出现一些小兼容问题。先到这里，待有空了再来细究。。。。