让 HTML5 背景视频填充 Retina 显示器的高度的诀窍是什么？

Question

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

今天，当我在 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 块

#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 中。