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

Question

所以我在我的网站上提供H.264 .mp4视频.我正在使用开源HTML5视频播放器http://mediaelementjs.com/.一些访问者正在从Safari for iPhone查看.iPhone 4仅支持高达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's onError回落到720p.

Safari将嗅探1080p文件的标题以确定它是否可播放,如果它太大而无法解码则会引发错误.然后我们捕获该错误以提供720p视频.

通过使用这种特征检测,后备不仅可以在一个设备(iPhone 4)上运行,而且可能在许多不同功能的浏览器上运行.

为什么多重<source>不会起作用

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

Answer 2

尝试此链接 该库应该能够检测用户代理，并且您可以相应地提供适当的文件。