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秒鍾 不然會有黑屏