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

时间 2019-11-09

标签微信 android 自动播放视频交互设置层级控制 x5 ffmpeg jsmpeg.js jsmpeg 栏目 Android 繁體版

原文原文链接

原料：javascript

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

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

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

win 64版为例：git

下载ffmpeg后,我解压到D盘 ffmpeg 目录以下：github

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

win+r 输入cmd 打开命令窗口，转到bin目录，并输入转码代码（相关参数请参看上面github做者地址）跨域

in.mp4 是咱们要原始视频（这里我直接把视频放在 bin目录里）服务器

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

更多参数配置命令

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