html - 为 Retina 显示器优化 HTML5 视频？

Question

我想提供视频的低分辨率和高分辨率版本，后者是用于视网膜显示器的。该视频应嵌入到 html5 页面中。特别是这将是一个 iPad 网络应用程序。

有没有一种简单的方法可以让浏览器引擎选择正确的引擎（例如从多个<source>标签中），还是我必须做一些 JS-foo？我确实找到了很多关于 和 CSS 处理的解决方案<img>，<canvas>但没有找到视频的最佳实践。

Answer 1

好吧，您可以尝试在元素上使用media 属性。source

下面给出一个代码示例：

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width:480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width:480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

问题是找到有助于表明显示器是视网膜的媒体查询。

编辑 我对此进行了更多测试，结果发现您还需要在其他来源上设置媒体查询，因为它们似乎具有优先权。我在以下位置写了一点：HTML5 video for Retina Displays。