根据屏幕尺寸选择视频源

就在 The Lodge 在这里开张后，我立即开始收到关于一些视频在 iPad 上无法播放的报告。哎呀，糟了，这些都是付费客户，他们应该能够在现代设备上观看这些内容。

我实际上使用 HTML5 <video> 来显示视频，并将它们托管在 Amazon S3 上（这样可以保护它们）。我一直在使用 Screenflow 以尽可能高的质量导出它们，从而获得 H.264 .mov 文件。

显然，这对于 iPad 来说不太好，最好使用 .mp4 格式。在 Mac 上，您可以从 Quicktime（以及 Screenflow）导出为 .mp4，但只能使用预设设置，例如“iPhone”或“iPad”或“Apple TV”。我想这很好，我只需选择“iPad”即可。质量很好，并且它们继续通过 HTML5 视频在桌面 WebKit 浏览器上运行。

为记录在案，我也在做

AddType video/mp4 mp4
AddType video/ogg ogv
AddType video/webm webm

从我的根 .htaccess 文件中，以便视频以正确的内容类型提供服务。尽管我不确定这在多大程度上有所帮助，因为视频位于 S3 上。

在一些快速测试中，视频也在 iPad 上播放，太好了！

但是随后，关于人们尝试在 iPad 上观看某些视频并失败的报告不断涌现。确切的行为是加载指示器一直在旋转、旋转、旋转。我实际上在这里使用的是 MediaElements.js（据我所知，原生 UI 上没有加载指示器），但播放视频的根本原因仍然只是原生 HTML5 视频（在支持的浏览器中）。我只是将 MediaElements.js 用作播放器的更美观的皮肤。

我验证了这一点。有些视频可以播放，有些则不能。我唯一能想到的是文件大小。我有一个 75MB 的视频可以播放，还有一个 99MB 的视频无法播放。奇怪但真实。

因此，我返回并重新导出了到目前为止我发布的所有视频，格式为“iPod” .mp4，分辨率略低，因此文件大小也更小。但我不想让每个人都因为视频质量降低而受到惩罚。该怎么办？

我最近才了解到 您可以在视频元素上使用媒体属性，例如

<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>

（确实让 <picture> 元素更有意义，对吧？）

这很棒，显然 Chrome 和 Safari 支持。但遗憾的是，iPad 不支持（我测试过）。它也 有可能被移除。

我需要一些现在就能正常运行的东西，所以我决定将源动态注入到视频中。首先，我测试屏幕宽度以查看它是否是一个相当小的屏幕（在这里测试 1200px，iPad 报告为 1024px）。使用 jQuery，并假设我已设置了一些包含视频源 URL 的变量

var mainVideo = $('#the-video');

if ($(window).width() < 1200 && medQualVersion) {
  mainVideo.append("<source type='video/mp4' src='" + medQualVersionSrc + "' />");
} else {
  mainVideo.append("<source type='video/mp4' src='" + highQualVersionSrc + "' />");
}
mainVideo.append("<source type='video/webm' src='" + webMSrc + "' />");

// Wait until sources are appended to call MediaElements.js
mainVideo.mediaelementplayer();

我并不完全喜欢这样。首先，我希望原始的高质量文件能够正常工作。其次，仅仅因为某人在使用 iPad，并不意味着他们想要更低的质量。他们可能不想要。但这是我目前唯一能想到的解决方法。

我不知道这是否是每个人的普遍问题，还是与我正在使用的各种技术有关，但我认为我应该记录下来。