针对 Retina 显示屏优化 HTML5 视频

Question

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

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

Answer 1

好吧，您可以尝试在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视频上写了一些关于它的文章。