摘自：https://thinkerchan.com/2017/05/31/安卓微信視頻播放全屏問題處理/
或者
安卓全屏問題
視頻全屏的H5專題十分收到業(yè)界喜歡, 雖然iOS下全屏自動(dòng)播放并沒有太大問題, 然而在安卓手機(jī)上胳挎，video組件全屏的時(shí)候會(huì)在頂層韧衣，好像”漂浮”在整個(gè)瀏覽器上面, 體驗(yàn)起來非常差. 除此之外, 即便采用JS給video設(shè)定為容器的寬高這方案, 也會(huì)出現(xiàn)難看的播放器控件,這時(shí)候不得不人為給視頻底部加空白,在通過JS計(jì)算適合的高度以擋掉丑陋的播放器控件, 實(shí)在苦惱.
JSMpeg簡(jiǎn)介
偶然發(fā)現(xiàn)JSMpeg這個(gè)項(xiàng)目,能解決安卓全屏video漂浮問題問題.
它的原理就是JS解碼視頻, 用 WebGL & Canvas2D渲染出來,于是達(dá)到避免Video控件在安卓微信瀏覽器下產(chǎn)生的問題, 不過有一個(gè)需要說明的地方就是, 你需要用將你的視頻文件(通常是mp4)轉(zhuǎn)換成ts格式的視頻文件, 并且 ,在iOS下的微信瀏覽器下, 使用jsmpeg播放ts文件, 是沒有聲音的,這個(gè)時(shí)候你可以另外添加對(duì)應(yīng)的audio同步播放即可. (其實(shí)iOS我們直接使用video+mp4的方式,也用不到這個(gè)插件).
推薦使用http://ffmpeg.org/, 至于怎么安裝就不再贅述.
生產(chǎn)ts視頻文件命令：
$ ffmpeg -i input.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 output.ts
這個(gè)時(shí)候, 默認(rèn)轉(zhuǎn)換到最低的清晰度, 如果要調(diào)整清晰度, 可以像這樣調(diào)整:
$ ffmpeg -i input.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b:v 1500k output.ts
JSMpeg調(diào)用
<canvas id = "canvas"></canvas>
<script>
? ? ? ? ? ? ?var player = new JSMpeg.Player('video.ts', {
? ? ? ? ? ? ? ? ? ? ? canvas: canvas,
? ? ? ? ? ? ????????? loop: false,
? ? ? ? ? ? ? ?????????progressive: true, //漸進(jìn)加載,false的話則會(huì)先下載完再渲染
? ? ? ? ? ? ? ?????????autoplay:true
? ? ? ? ? ? ? }); ?
</script>
當(dāng)然你也直接在HTML中使用：
<div class="jsmpeg"
????????data-url="video.ts"
? ?????data-loop="false"
? ? ????data-autoplay="true">
</div>
缺點(diǎn)：
雖然這個(gè)方案能實(shí)現(xiàn)安卓下canvas播放視頻, 但本人實(shí)測(cè),它實(shí)在是太耗性能了(華為p10都會(huì)卡), 并不像作者所說的的流暢.
????JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at ????just 20kb gzipped.
所以究竟能不能用這個(gè)方案, 得根據(jù)需求自行斟酌.
摘自：https://blog.csdn.net/weixin_43029824/java/article/details/103391494
利用ffmpeg轉(zhuǎn)ts視頻庸追，通過jsmpeg.js播放(自動(dòng)播放視頻，無video默認(rèn)控制條）
方案
1涝缝、下載 jsmpeg.js
ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64
https://evermeet.cx/ffmpeg/ mac OS X 64
jsmpeg.js :https://github.com/phoboslab/jsmpeg
2扑庞、使用
win 64 版為例：
下載 ffmpeg 后,解壓 ffmpeg譬重，進(jìn)入 bin 目錄看到幾個(gè) exe 這就是處理程序。
下載解壓后：
win+r 輸入 cmd 打開命令窗口罐氨，轉(zhuǎn)到 bin 目錄臀规，并輸入轉(zhuǎn)碼代碼:（或者直接在bin目錄地址欄清空地址后輸入cmd打開命令窗口）
ffmpeg -i demo1.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 ts.ts
畫質(zhì)清晰些的轉(zhuǎn)碼代碼：
ffmpeg -i niudan.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -q 0 out22.ts
demo1.mp4 是我們要原始視頻 （這里我直接把視頻放在 bin 目錄里）
回車運(yùn)行后，bin 目錄輸出 ts.ts
更多參數(shù)配置命令
ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640x1040 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out.ts
原始視頻 導(dǎo)出尺寸 導(dǎo)出碼率 導(dǎo)出幀頻 音頻采樣率 音頻比特率
ps:相關(guān)參數(shù)請(qǐng)參看https://github.com/phoboslab/jsmpeg 文檔
播放控制：
play() – start playback
pause() – pause playback
stop() – stop playback and seek to the beginning
destroy() – stops playback, disconnects the source and cleans up WebGL and WebAudio state. The player can not be used afterwards.
volume – get or set the audio volume (0-1)
currentTime – get or set the current playback position in seconds
例如 player.pause()
注意：
清晰度和原視頻差不多的條件下栅隐，碼率幾乎需要多設(shè)置 1 倍塔嬉；
跨域問題
jsmpeg 請(qǐng)求 ts 媒體文件，使用的是 XMLHttpRequest租悄，且同時(shí)使用了 setRequestHeader(“Range”, “bytes=xxxx”); 來請(qǐng)求切割數(shù)據(jù)谨究，這樣拿到我們?cè)O(shè)定 xxx 的字節(jié)的數(shù)據(jù)后，我們可以及時(shí)對(duì)數(shù)據(jù)進(jìn)行處理（jsmpeg 設(shè)置參數(shù) chunkSize 就是這里的 xxx）泣棋。
因?yàn)榭缬蚪赫埽懈顢?shù)據(jù) 服務(wù)器認(rèn)為這是對(duì)文件進(jìn)行二次操作所以被拒絕。
demo必須放在服務(wù)器上面跑才能正常加載ts文件潭辈，如果是在本地的話鸯屿，不能直接拖進(jìn)瀏覽器運(yùn)行，需要起個(gè)本地服務(wù)器
ts文件編碼方式必須為MPEG編碼把敢，考慮到現(xiàn)在先進(jìn)的ts編碼方式是H.264了寄摆，之前用H.264編碼的ts發(fā)現(xiàn)播放不了
那么對(duì)服務(wù)進(jìn)行配置一下 ：我這里使用的 serve 工具 跑個(gè)服務(wù)即可
serve 實(shí)例：
首先需要安裝 node
使用 npm 命令行來安裝 serve
npm install -g serve
安裝完成后，使用 serve -s .\dist 進(jìn)入文件文件目錄就可以了
<body>
? ? <canvas id="video-canvas"></canvas>? ?
? ? <script type="text/javascript" src="jsmpeg.min.js"></script>
? ? <script type="text/javascript">
? ? window.onload=function(){
? ? ? ? var canvas = document.getElementById('video-canvas');
? ? ? ? var url = 'demo-ts.ts';
? ? ? ? //var url = 'ws://'+document.location.hostname+':8082/';
? ? ? ? var player = new JSMpeg.Player(url, {canvas: canvas,loop: true, autoplay: true});
? ? }
? ? </script>
</body>
參考鏈接：
chrome66 禁止自動(dòng)播放后修赞，有什么比較好的方法實(shí)現(xiàn)audio的自動(dòng)播放嗎
微信Android自動(dòng)播放視頻（可交互婶恼，設(shè)置層級(jí)，無控制條榔组，非X5）ffmpeg,jsmpeg.js,.ts視頻
