javascript - 使用 Javascript 或 HTML 检测 iOS 设备的型号？

Question

所以我在我的网站上提供 H.264 .mp4 视频。我正在使用开源 HTML5 视频播放器 http://mediaelementjs.com/ .一些访问者正在通过 iPhone 版 Safari 查看。 iPhone 4 仅支持最高 720p 的视频播放，因此如果我制作的视频小于 720p，则它们可以在 4 和 4S 上播放。但 4S 支持高达 1080p 的视频。那么我如何向 4S 提供较大的视频并向 4 提供较小的视频呢？我试过这个:

<video width="640" height="400" id="player" controls="controls" preload="auto">
    <source src="https://s3.amazonaws.com/my-big-1080p-video.mp4" type="video/mp4">
    <source src="https://s3.amazonaws.com/my-small-720p-video.mp4" type="video/mp4">
</video>

但是没有用。 iPhone 4 不够智能，无法尝试第二个来源。如何让我的网站为不同的设备提供正确的视频？

Answer 1

在 iPhone 4 上播放 720p 视频 — 在 iPhone 4S 上播放 1080p 视频

在 iPhone 4 和 4S 上试试这个 ( jsfiddle )

<video src="http://file.brow.sr/1080p.mp4" onerror="this.src='http://file.brow.sr/720p.mp4';" controls loop width="320" height="180">
</video>

解释

加载 1080p 视频，然后使用 Javascript 的 onError回退到 720p。

Safari 会嗅探 1080p 文件的 header 以确定它是否可以播放，如果它太大而无法解码，则会抛出错误。然后我们捕获该错误以提供 720p 视频。

通过使用这种功能检测，回退不仅适用于一台设备 (iPhone 4)，而且可能适用于许多不同的浏览器。

为什么多个<source>的行不通

当使用多个 <source> 时标记具有相同的 MIME 类型，浏览器将加载具有兼容 MIME 类型的第一个源并丢弃其他源，即使该视频不可播放。那是因为 source元素 are expected提供替代视频编解码器(例如 ogg、webm、mp4)，不是替代帧大小/文件大小。