有帮助?打赏吧!

微信Android自动播放视频(可交互,设置层级,无控制条,非X5)ffmpeg,jsmpeg.js,.ts视频

原料:

ffmpeg : http://ffmpeg.zeranoe.com/builds/  win64

    https://evermeet.cx/ffmpeg/   mac OS X 64

jsmpeg.js :https://github.com/phoboslab/jsmpeg

 

win 64版为例:

下载ffmpeg后,我解压到D盘 ffmpeg 目录 如下:

进入bin目录看到几个exe 这就是处理程序。

win+r  输入cmd 打开命令窗口,转到bin目录,并输入转码代码(相关参数请参看上面github作者地址)

 

in.mp4 是我们要原始视频 (这里我直接把视频放在 bin目录里)

回车运行后,bin目录输出out.ts 

 

更多参数配置命令

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

    原始视频                          导出尺寸   导出码率   导出帧频              音频采样率       音频比特率   

 

html代码

<body>
    <canvas id="video-canvas"></canvas>    
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
    window.onload=function(){
        var canvas = document.getElementById('video-canvas');
        var url = 'out.ts';
        //var url = 'ws://'+document.location.hostname+':8082/';
        var player = new JSMpeg.Player(url, {canvas: canvas,loop: true, autoplay: true});
    }
    </script>
</body>

 

播放控制: 

play() – start playback
pause() – pause playback
stop() – stop playback and seek to the beginning
destroy() – stops playback, disconnects the source and cleans up WebGL and WebAudio state. The player can not be used afterwards.
volume – get or set the audio volume (0-1)
currentTime – get or set the current playback position in seconds

例如 player.pause()

 

跨域问题 

jsmpeg请求ts媒体文件,使用的是XMLHttpRequest,且同时使用了 setRequestHeader("Range", "bytes=xxxx");  来请求切割数据,这样拿到我们设定 xxx 的字节的数据后,我们可以及时对数据进行处理(jsmpeg设置参数chunkSize就是这里的xxx)。

因为跨域,切割数据 服务器认为这是对文件进行二次操作所以被拒绝。

那么对服务进行配置一下 :我这里使用的 iis 其他的应该一样

 

HTTP响应头 进入编辑 如下

 

以下2个都需要

Access-Control-Allow-Headers

Access-Control-Expose-Headers


值

Content-Length,Range


注意:

1 清晰度和原视频差不多的条件下,码率几乎需要多设置1倍;

 

PS: ios 建议仍然使用video播放 

 

posted @ 2017-09-15 10:02  luoeeyang  Views(8479)  Comments(0Edit  收藏  举报