移动端网站背景视频自动播放兼容方案-jsmpeg

移动端视频背景播放视频用video会有很多问题，qq浏览器，百度浏览器等会将视频固定在最上方等等问题，因此利用ffmpeg将视频转换成ts文件，用jsmpeg进行播放。

1、先下载jsmpeg：
https://gitee.com/webrtcsfu/jsmpeg

2、在里面找windows64的 然后下载 ffmpeg-master-latest-win64-gpl：
https://github.com/BtbN/FFmpeg-Builds/releases

3、配置系统环境变量：
将  ffmpeg-master-latest-win64-gpl 放在自己的文件夹下 粘贴地址
 eg:D:\software\ffmpeg-master-latest-win64-gpl\bin
将地址放在系统环境变量path里（搜索高级设置，就能找到系统属性- 高级）

4、打开命令行 输入 ffmpeg 看是否成功

5、打开bin文件夹，将需要转码的视频放进来，在此文件夹下启动cmd命令：
// 原始高清的 ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -q 0 out2.ts
// 模糊点的 ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -s 1920x800 -b:v 0 -codec:a mp2 -b 0 out.ts
// 提高比特率（码率）来提升视频清晰质量 ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b:v 10M out3.ts

 

 转换成功：

 ----------------------------------------------------------------------

准备工作做好，下来开始视频播放部分：

需要注意只能放在服务器上播放成功，可以设置本地服务器代理，直接打开本地文件是播放不了的

1、页面引入 <script type="text/javascript" src="js/jsmpeg.min.js"></script>

2、<canvas id="video" :style="{'width':'100%','height':'4.24rem','object-fit':'cover'}" ></canvas>

3、var player = new JSMpeg.Player('./js/out3.ts', {

            canvas: document.getElementById('video'),

            poster: baseImgPath + '/home/video_poster.png',

            decodeFirstFrame: true,

            disableWebAssembly: false,

            throttled: false, //这里设置为false，不然不触发onSourceCompleted事件

            // chunkSize: 4 * 1024 * 1024,

            disableGl: false,

            audio: true,

            autoplay: true,

            loop: true,

            onSourceCompleted: () => {

               

            }

        });

好啦，播放成功

 目前来看，在qq浏览器，百度浏览器上都没有问题啦，至此，移动端视频自动背景播放完成啦~~~，也是不容易，以下参考学习链接：

Ffmpeg+Node.js+jsmpeg网络视频服务器安装 - 爱码网

 javascript - 移动端视频播放方案——JSMpeg_个人文章 - SegmentFault 思否