移动端视频背景播放视频用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网络视频服务器安装 - 爱码网文章来源：https://www.toymoban.com/news/detail-406592.html
javascript - 移动端视频播放方案——JSMpeg_个人文章 - SegmentFault 思否文章来源地址https://www.toymoban.com/news/detail-406592.html
到了这里，关于移动端网站背景视频自动播放兼容方案-jsmpeg的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
