JSMpeg的使用

JSMpeg是JS写的视频、音频解码器，能使用WebGL&Canvas2D渲染以及WebAudio声音输出。

1.官网：https://jsmpeg.com/

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

官方例子:https://jsmpeg.com/perf.html

 

2.简单例子

<canvas id="video" width="667" height="375"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script>
var player = new JSMpeg.Player('test.ts', {
    canvas: document.getElementById('video'),
    decodeFirstFrame: true,
    disableWebAssembly: false,
    throttled: false, //这里设置为false，不然不触发onSourceCompleted事件
    chunkSize: 4 * 1024 * 1024,
    disableGl: false,
    audio: true,
    autoplay:true,
    loop:false,
    onSourceCompleted:()=>{
    }
});
player.play();
</script>

 

3.注意事项

①需要转换为特定的格式，比如将mp4文件进行转换：

ffmpeg -i in.mp4 -f mpegts \
    -codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 \
    -codec:a mp2 -ar 44100 -ac 1 -b:a 128k \
    out.ts

②IOS声音问题：IOS播放时默认没有声音，需要用户点击后才能发声（相当于获得用户允许后才能发声）。解决方案就是在启动时增加一个开始按钮或者增加一个音量已关闭的按钮，让用户点击时解锁声音。

function onUnlocked () {
    player.volume = 1
    document.removeEventListener('touchstart', onTouchStart)
}

function onTouchStart () {
    player.audioOut.unlock(onUnlocked)
    document.removeEventListener('touchstart', onTouchStart)
}

// try to unlock immediately
player.audioOut.unlock(onUnlocked)

// try to unlock by touchstart event
document.addEventListener('touchstart', onTouchStart, false)

 

以上。