微信Android自動播放視頻（可交互，設置層級，無控制條，非X5）ffmpeg,jsmpeg.js,.ts視頻

時間 2019-11-09

標籤微信 android 自動播放視頻交互設置層級控制 x5 ffmpeg jsmpeg.js jsmpeg 欄目 Android 简体版

原文原文鏈接

原料：javascript

ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64html

　　　　https://evermeet.cx/ffmpeg/ mac OS X 64java

jsmpeg.js :https://github.com/phoboslab/jsmpegios

win 64版爲例：git

下載ffmpeg後,我解壓到D盤 ffmpeg 目錄以下：github

進入bin目錄看到幾個exe 這就是處理程序。canvas

win+r 輸入cmd 打開命令窗口，轉到bin目錄，並輸入轉碼代碼（相關參數請參看上面github做者地址）跨域

in.mp4 是咱們要原始視頻（這裏我直接把視頻放在 bin目錄裏）服務器

回車運行後，bin目錄輸出out.ts ide

更多參數配置命令

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

　　　　原始視頻　　　　　　　　　　　　　　導出尺寸　導出碼率導出幀頻　　　　　　　音頻採樣率　　音頻比特率　　　

html代碼

<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 = 'out.ts';
        //var url = 'ws://'+document.location.hostname+':8082/';
        var player = new JSMpeg.Player(url, {canvas: canvas,loop: true, autoplay: true});
    }
    </script>
</body>

播放控制：　

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()

跨域問題

jsmpeg請求ts媒體文件，使用的是XMLHttpRequest，且同時使用了 setRequestHeader("Range", "bytes=xxxx"); 來請求切割數據，這樣拿到咱們設定 xxx 的字節的數據後，咱們能夠及時對數據進行處理（jsmpeg設置參數chunkSize就是這裏的xxx）。

由於跨域，切割數據服務器認爲這是對文件進行二次操做因此被拒絕。

那麼對服務進行配置一下：我這裏使用的 iis 其餘的應該同樣

、

HTTP響應頭進入編輯以下

如下2個都須要

Access-Control-Allow-Headers

Access-Control-Expose-Headers


值

Content-Length,Range

注意：

1 清晰度和原視頻差很少的條件下，碼率幾乎須要多設置1倍；

PS: ios 建議仍然使用video播放

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。