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

jquery JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列帧播放 前面图片加载好 后面边播放边加载 具体看http://newmiracle.cn/?p=2860

<!DOCTYPE html>
<html>

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

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

</html>


ps:ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts  导出来的720*480尺寸不对也没关系
  转化成ts  ts不支持透明底 如果透明底只能用gif或者png序列来做了
具体使用说明 https://github.com/phoboslab/jsmpeg 在低端安卓手机上测试过 性能还不错

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

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2384

发表评论

电子邮件地址不会被公开。 必填项已用*标注