css - 让 HTML5 背景视频填满视网膜显示器的高度有什么诀窍？

Question

我使用背景视频构建了一个新的客户端启动页面，除了针对 iPhone 的响应式调整和在 iOS 上删除背景视频外，我没有想到要在 Retina 上进行测试。

今天，正如我在 MBP Retina 上看到的那样，视频似乎在高度上覆盖了“正确的像素数”，但不确定如何强制视频覆盖“2x”。

你听说过这个规范吗？

是否可以像将视频背景的最小高度/最小宽度设置为视网膜的“200%”一样​​简单？

使用的标记

<div id="bgVideo" class="background">
  <video id="video_background" preload="auto" autoplay loop muted volume="0">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.mp4" type="video/mp4">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.webm" type="video/webm">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.ogv" type="video/ogg">
  </video>
</div>
<span style="opacity: .9"<div class="video_pattern" ></div></span>

CSS block

#video_background { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
}

截图和链接

Link to Live Site

Retina Resolution Display Screenshot - (MBP 13" Retina)

Answer 1

可用于 Retina 的技巧是在 JavaScript 中实例化元素，将其宽度和高度设置为“常规”主体大小的两倍。

您可以像这样实例化宽度和高度变量:

var videoWidth = (body.innerWidth() * 2);
var videoHeight = (body.innerHeight() * 2);

然后，当您在 JavaScript 文件中创建视频背景对象时，将宽度和高度参数设置为 videoWidth 和 videoHeight 的一半。它可能看起来像这样:

videoBackground.setAttribute('width', videoWidth / 2);
videoBackground.setAttribute('height', videoHeight/ 2);

上面的代码将在桌面和非视网膜设备上正常显示视频背景。最后，您可以使用以下代码在检测到 Retina 设备时将其放大:

if(window.devicePixelRatio == 2) {
    videoBackground.setAttribute('width', videoWidth);
    videoBackground.setAttribute('height', videoHeight);
}

此方法的优点是它为非视网膜显示器提供了后备。此解决方案的重要方面是您在 JavaScript 中而不是在 HTML 中实例化您的视频对象。