在响应式网站上检测对移动设备的最大视频分辨率支持

Posted

技术标签:

【中文标题】在响应式网站上检测对移动设备的最大视频分辨率支持【英文标题】:Detect max video resolution support for a mobile device on responsive website 【发布时间】:2013-05-28 06:06:51 【问题描述】:

正如标题所说,我正在寻找用于显示 不同尺寸分辨率html5 视频的跨浏览器和跨平台解决方案。我的主要问题是,如果从标准/低清晰度设备访问高分辨率视频,它将不会播放,因为本机视频应用程序无法处理它;这在具有标准或低显示分辨率的旧款/低预算 android 设备上最为常见。

我的最佳猜测是根据设备宽度媒体查询过滤视频源文件,例如if width < 480 --> use low-res video,但这可能会排除功能强大的高端设备,如 iphone、galaxyS2+ 等。

最后我问是否有类似“最大视频分辨率支持”或类似内容的查询。我知道Android API中有一些东西,但我不知道它是否可以在这种情况下使用..

下面是我找到的一些链接供参考:

http://www.genuitec.com/mobile/docs/encodingVideo/encodingVideo.html http://developer.android.com/guide/appendix/media-formats.html#recommendations http://developer.android.com/reference/android/media/CamcorderProfile.html

【问题讨论】:

【参考方案1】:

根据本文,Android 建议为此使用 CamcorderProfile: http://developer.android.com/guide/appendix/media-formats.html#recommendations

他们说:

[...] 设备的可用视频录制配置文件可用作媒体播放功能的代理。可以使用从 API 级别 8 开始提供的 CamcorderProfile 类检查这些配置文件。

我现在也在使用 CamcorderProfile 来检测最大视频宽度和高度:

  CamcorderProfile profile = CamcorderProfile.get(CamcorderProfile.QUALITY_HIGH);
    Log.d(TAG, "Max Width: " + profile.videoFrameWidth);
    Log.d(TAG, "Max Height: " + profile.videoFrameHeight);

起初我认为这不是一个好的解决方案,因为某些设备需要在 Android Manifest 中获得使用相机权限的权限(对我来说这是 HTC Evo 3D):

<uses-permission android:name="android.permission.CAMERA"/>

不幸的是,我也意识到它无法正常工作,因为对于我的 Nexus S,它说最大分辨率为 480x720 像素,但我能够从 http://source.android.com/compatibility/downloads.html#cts-media-files 播放 1280x720 视频 更相应地,zip存档中的文件夹和文件名是: android-cts-media-1.0\bbb_short\1280x720\mp4_libx264_libfaac\bbb_short.ffmpeg.1280x720.mp4.libx264_1750kbps_30fps.libfaac_stereo_192kbps_48000Hz.mp4

这个方法可能对你有帮助。

但我将不胜感激任何其他更适合的方法!有人知道另一种方法吗?

【讨论】:

这很有趣,但代码是 java 还是 javascript?截至目前,我部分解决了通过媒体查询为宽度低于 480 像素的任何设备提供 360p 的低分辨率视频,但它当然不是理想的解决方案.. 它是 Java 代码,CamcorderProfile(developer.android.com/reference/android/media/…) 从 API 级别 8 开始可用,因此该方法通常可用于几乎所有设备。我必须纠正自己,因为无法在 Nexus S 上播放视频比特率高于 1750 kbs 的 1280x720 视频,因此检测到的视频最大分辨率(我的 Nexus S 为 720x480)。

以上是关于在响应式网站上检测对移动设备的最大视频分辨率支持的主要内容,如果未能解决你的问题,请参考以下文章

响应式网站的优缺点

H5响应式网站的概念

如何进行响应式设计?

响应式网站在移动浏览器中看起来不同

基于响应式 Bootstrap 的网页在移动设备上显示效果不佳

响应式布局基础