移动端视频背景播放视频用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浏览器,百度浏览器上都没有问题啦,至此,移动端视频自动背景播放完成啦~~~,也是不容易,以下参考学习链接: