需求：项目是一个网页端，需要在PC和手机端展示。用一段视频作为项目背景图，UI设计师给的无声视频 .mp4 视频文件。
PC浏览器对视频限制比较宽松，可以正常在PC中自动播放。
问题： 微信/手机端浏览器(iOS Safari等)对视频自动播放的限制
微信和部分浏览器处于对用户体验，节省流量，对音视频的自动播放做了严格的限制，需要满足以下条件：1. muted+autoplay 2. 视频无音频轨道 3. 页面和用户交互行为
微信内置浏览器（X5 内核）中，H5 网页的 <video> 自动播放（autoplay）行为受到严格限制，导致“视频不显示”或“黑屏/白屏但无画面”。因为微信（以及大多数移动端浏览器）出于 用户体验和流量节省 考虑，禁止静音以外的视频自动播放，即使你设置了 muted 和 autoplay，微信依然认定其不是真正静音的，微信判断视频静音通过视频是否含有音频轨道，而不是音量为 0 。
删除音频轨道可以通过 ffmpeg 工具：
ffmpeg -i input.mp4 -an -c:v copy output_no_audio.mp4
当视频信息中的音频相关没有参数说明轨道已经被删除了。
有音频轨道
无音频轨道
解决方案：把mp4转化为其他格式动态图
既然微信对视频有了限制，那就用 gif/webp来实现动态视频，从而避开了微信/IOS等平台的限制。
GIF、WebP（Animated）和 MP4 是三种常用于网页动效/短视频的格式，它们在压缩效率、功能支持、兼容性、性能等方面有显著差异。以下是详细对比：
图片来源：ai
在不同场景选择适合自己的格式
在我的项目中，是需要两个视频在某种条件下交替显示的，虽然可以使用 opacty 来减少 dom 的频繁更替。不过有一个视频长度是 15 秒，如果转化为 gif 导致文件体积巨大（尤其是彩色视频，大于10秒的视频） ，在手机中播放效果非常差，甚至卡顿崩溃。而视频在一些平台无法自动播放，最终只有 webp 可以使用了。
我的项目中，视频不需要音量，又要作为背景自动播放，webP就非常合适，而且ffmpeg可以直接把mp4转换为 webp。注意：转换过程中需要进行一些参数调整，避免webp体积过大导致卡顿（尤其是 大于10秒的视频）。
推荐命令：下载win64的ffmpeg后在把视频拖到bin文件夹，终端执行
./ffmpeg -i input.mp4 `
-vf "fps=10,scale=480:-2" `
-vcodec libwebp `
-lossless 0 `
-q:v 75 `
-loop 0 `
-an `
-preset picture ` output.webp
参数详解：
图片来源：ai
如果webp体积依然很大，卡顿，可以继续降低参数
-q:v 60 # 质量降到 60
fps=8 # 帧率降到 8fps
scale=320:-2 # 宽度 320px
