javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)

javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)

缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列帧播放 前面图片加载好 后面边播放边加载 具体看http://newmiracle.cn/?p=2860
<pre>

JSMpeg Stream Client

<style type="text/css">
html,
body {
background-color: #111;
text-align: center;
}
</style></pre>
<canvas id="video-canvas"></canvas> <script src="/moban/js/jquery.min.js"></script> <script type="text/javascript" src="/jsmpeg/jsmpeg.min.js"></script> <script type="text/javascript">
$(function() {
var canvas = document.getElementById('video-canvas');
var player = new JSMpeg.Player('/\shipinmoban/mp4/out.ts', { canvas: canvas});
player.play();
var playvideotimer=setInterval(function(){
var currentTime=player.currentTime;
console.log(currentTime);
if(currentTime>=3){
clearInterval(playvideotimer)
player.destroy();
$('canvas').remove();
}
},60)
})
</script>
<pre>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
</pre>
<img class="alignnone size-medium wp-image-3087" src="http://newmiracle.cn/wp-content/uploads/2018/02/TIM截图20190304170539-300x37.png" alt="TIM截图20190304170539" width="300" height="37" />

ps:
1 可能右边会有白边需要设置width:103%
2 play前需要3秒钟 不然会有黑屏