# 移动端H5页面音频/视频规范
移动端设备屏幕尺寸、分辨率各不相同,不同系统对音频/视频的支持情况也不一样,为了音频/视频可以在不同设备表现更好,请参阅以下规范。
# 音频输出建议
- 音频格式为.mp3;
- 音频文件大小压缩控制在5M以内;
# 音频H5常见问题
- 背景音乐不能自动播放,音频在H5页面中通常做为背景音乐,有些需求要求实现自动播放
- 页面设计中添加播放音乐的开关,通过交互操作实现音乐的播放;
- 微信或APP场景中通过监听WeixinJSBridgeReady事件、DOMContentLoaded事件;
- 通过手势事件播放音乐,监听body的touchstart事件,回调中播放音乐;
# 视频输出尺寸
- 竖版视频尺寸:750x1448px,其中安全区域大小750x1095px;横版视频尺寸:1422x600px,其中安全区域大小960x600px;
- H5视频码率规范及尺寸详细如下图:
# 视频H5页面交互设计建议
- 因视频文件一般较大,为了体验流畅,需要设计加载页面,页面尺寸同视频分辨率一致;
- 对于不能自动播放视频的设备,设计开始播放视频的指引按钮;
# 视频压缩教程
Handbrake是个免费的视频压缩软件,对x264(视频编码工具)的支持更好,可以设置更多视频压缩相关参数。
← 移动端兼容 移动端页面字体使用参考 →