所以我在我的网站上提供 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 不够智能,无法尝试第二个来源。如何让我的网站为不同的设备提供正确的视频?
最佳答案
在 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),不是替代帧大小/文件大小。
关于javascript - 使用 Javascript 或 HTML 检测 iOS 设备的型号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10921832/