安卓微信視訊播放全屏問題處理

諸葛彧發表於2019-02-28
安卓

安卓全屏問題

視訊全屏的H5專題十分收到業界喜歡, 雖然iOS下全屏自動播放並沒有太大問題, 然而在安卓手機上，video元件全屏的時候會在頂層，好像”漂浮”在整個瀏覽器上面, 體驗起來非常差. 除此之外, 即便採用JS給video設定為容器的寬高這方案, 也會出現難看的播放器控制元件,這時候不得不人為給視訊底部加空白,在通過JS計算適合的高度以擋掉醜陋的播放器控制元件, 實在苦惱.

JSMpeg簡介

偶然發現JSMpeg這個專案,能解決安卓全屏video漂浮問題問題.

它的原理就是JS解碼視訊, 用 WebGL & Canvas2D渲染出來,於是達到避免Video控制元件在安卓微信瀏覽器下產生的問題, 不過有一個需要說明的地方就是, 你需要用將你的視訊檔案(通常是mp4)轉換成ts格式的視訊檔案, 並且 ,在iOS下的微信瀏覽器下, 使用jsmpeg播放ts檔案, 是沒有聲音的. (iOS我們直接使用video+mp4的方式,也用不到這個外掛).

你可以使用convertio.co/zh/mp4-ts/線上轉換, 不過更推薦使用ffmpeg.org/,至於怎麼安裝就不再贅述.

生產ts視訊檔案命令：

    $ ffmpeg -i 你的原始檔.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 輸出檔案.ts
複製程式碼

JSMpeg呼叫

	<canvas id = "canvas"></canvas>
	<script>
 	 var player = new JSMpeg.Player(`video.ts`, {
     	canvas: canvas, 
        loop: false,
        autoplay:true
     });  
  </script>
複製程式碼

當然你也直接在HTML中使用

<div class="jsmpeg" 
	data-url="video.ts" 
    data-loop="false" 
    data-autoplay="true">
</div>
複製程式碼

DEMO

點選這裡體驗Demo

或者直接掃描

qrcode

本文來自thinkerchan.com

相關文章