问题描述
我一直在尝试在 Koa 框架中显示网页的视频背景。简短的 HTML 如下:
<video class="col-12 nopadding" id="vid" loop muted autoplay playsinline>
</video>
<div class="over">
<h1>¿Lorem ipsum dolor sit?</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit primis</p>
<button class="btn btn-primary btn-xl" type="button" onclick="window.location.href='#firma'">Lorem</button>
</div>
<h1>
和<p>
被转置在视频背景前面,并使用了Bootstrap,视频的来源是在最后通过Javascript 添加的,选择{{1}首先找出适合屏幕尺寸的视口大小(移动/桌面):
src
两个视频都具有与 iOS 兼容的正确编解码器(我认为),如 ffmpeg 配置所示:
<script>
var w = window.matchMedia("(max-width: 769px)");
var vid = document.getElementById("vid");
var source = document.createElement("source");
source.id = "hvid";
source.setAttribute("type","video/mp4");
vid.appendChild(source);
if (w.matches) {
vid.pause();
vid.setAttribute("poster","<%= assetPath('poster_2-3.jpg') %>");
source.removeAttribute("src");
source.setAttribute("src","light_2-3.mp4");
vid.load();
vid.play();
} else {
vid.pause();
vid.setAttribute("poster","<%= assetPath('poster_9-16.jpg') %>");
source.removeAttribute("src");
source.setAttribute("src","light_9-16.mp4");
vid.load();
vid.play();
}
</script>
视频背景在 Safari、Chrome 和 Android 移动设备上完美运行,视频在 iPhone 或 iPad 中根本不显示(在我添加海报之前是一个白色的空矩形)。编解码器似乎是正确的,ffmpeg -i input.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.1 -b:v 200K -r 30 light_2-3.mp4
和 playsinline
属性在视频标签上,经过几天的研究,我找不到任何新的解决方案。
有什么想法吗?
Here is an example of the video background
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)