原料：
ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64
https://evermeet.cx/ffmpeg/ mac OS X 64
jsmpeg.js :https://github.com/phoboslab/jsmpeg
win 64版為例：
下載ffmpeg后,我解壓到D盤 ffmpeg 目錄 如下：
進入bin目錄看到幾個exe 這就是處理程序。
win+r 輸入cmd 打開命令窗口，轉到bin目錄，并輸入轉碼代碼（相關參數請參看上面github作者地址）
in.mp4 是我們要原始視頻 （這里我直接把視頻放在 bin目錄里）
回車運行后，bin目錄輸出out.ts
更多參數配置命令
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播放
文章列表
留言列表
