为Retina显示器优化HTML5视频？

Question

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

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

Answer 1

您可以尝试在source元素上使用media attribute。

下面给出了一个代码示例：

<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上写了一些关于它的文章。