一切似乎都可以在桌面上的 Safari 和 Chrome 中运行。但iOS不合作。
这是我对视频进行编码的方式:
ffmpeg -an -i orig.mp4 -vcodec libx264 -crf 30 -maxrate 900 -pix_fmt yuv420p -profile:v baseline -level 3 homepage.mp4
这是我的html:
<video id="bgvid" playsinline muted autoplay loop src="/assets/videos/homepage.mp4" type="video/mp4"></video>
这是我的CSS:
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
如果您想亲眼看看:2606southave.com
最佳答案
罪魁祸首是你的 CSS:
@media screen and (max-device-width: 800px) {
#bgvid { display: none; }
}
您告诉它在宽度为 800 像素或更小时不显示。
至于
ffmpeg
,我建议添加 -movflags +faststart
输出选项,以便视频可以在下载的同时开始播放。 -maxrate
值以位为单位,所以您的意思可能是 900k
.您的视频超出了第 3 级的限制,因此只需删除 -level
并让它选择级别。考虑使用 -profile:v main
而不是 baseline
如果您不需要支持非常古老的设备,您将利用一些更好的压缩。
关于HTML5 视频在 macOS Safari 上播放,而不是 iOS Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54563721/