解決微信瀏覽器內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等等瀏覽器又出現一些小兼容問題。先到這裏，待有空了再來細究。。。。