首页 > Web开发 > 详细

JSMpeg的使用

时间:2020-09-18 18:50:57      阅读:359      评论:0      收藏:0      [点我收藏+]

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, //这里需要屏蔽,不然有可能导致IOS没有声音
    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)

注意:设置throttled属性也有可能导致IOS不能发声,需要将这个属性屏蔽掉。

 

以上。

JSMpeg的使用

原文:https://www.cnblogs.com/chevin/p/13692721.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!