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

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

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

 

 JSMpeg Stream Client
 

<style type="text/css">
 html,
 body {
 background-color: #111;
 text-align: center;
 }
 </style>

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

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

<img class=”alignnone size-medium wp-image-3087″ src=”http://newmiracle.cn/wp-content/uploads/2018/02/TIM截图20190304170539-300×37.png” alt=”TIM截图20190304170539″ width=”300″ height=”37″ />

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