6条小干货，提升视频类H5可用性

【设计日记】是腾讯FiT designer的短平快设计思考。在这里你可以看到设计师的一些日常活动，对工作、对设计的一些个人感悟或者小思考，还能发现FiT designer工作生活中的创意活力。

FiT金融市场部 页面重构组

joinli nekozheng huayudeng terryqin

视频H5具有很强的视觉冲击力和感染力，能给用户传达更丰富的画面信息，在近段时间被广泛应用。 鉴于移动端环境复杂多变，H5的用户体验将影响传播效果，因此视频H5的可访问性尤为重要，做到本文所提到的以下几点，会让你的视频类H5产品具有更高的可访问性。

iOS系统手持设备市场占比为26%；iOS的迭代过程中屏幕分辨率基本为等比关系，相较于安卓及其他系统的多种分辨率发展更为稳定。其中1334x750在2017上半年占比最高，为iOS的主流分辨率。

【结论】以iPhone6/6s/7为代表机型的1334x750分辨率作为H5屏幕尺寸的基准。

1334x750的屏幕高宽比为16:9。此比例在iOS设备中占比近90%，在安卓系统中占比超过70%。

【结论】选择1334x750分辨率作为视频尺寸，可使用等比缩放的方式完美适配16:9的手持设备

在非16:9的手持设备屏幕下，全屏视频将有部分画面不可见。如强行对视频进行拉伸则画面会变形，因此视频排版上需要有所取舍。

【结论】建议以全屏视频的重点内容位置作为焦点，对其做相应的等比缩放处理

【结论】视频适配方案，应根据视频重点内容的焦点位置的不同情况，选择对应的解决方案。

HTML5的video元素支持WebM、Ogg、MPEG-4等常用视频格式

【结论】H5的视频建议使用MPEG-4作为输出编码格式，导出 *.mp4 视频文件 。

H5中的视频通过流式传输的方式，使视频内容像流水一样传输，边播放边加载，然而受不同网络状况的影响，用户在浏览视频H5过程中可能会遇到视频卡顿的状况。

视频码率（kbps），是指视频经过编码压缩后每秒钟需要用多少数据量来表示，因此，视频浏览的流畅度也与视频码率有关系。

视频码率受视频尺寸、帧率、画面复杂度、画面变化复杂度的综合影响，当其他条件一定时，码率越大，视频就越清晰，但文件体积也会越大，加载越容易卡顿。

基于画面尽可能高清、卡顿次数近乎无感知的极致体验目标下，视频在不同的网络下应有所取舍

关注以下几点，即可让视频H5具备高可访问性哦

部分数据来源及参考文献资料：

移动设备分析 http://mta.qq.com/mta/data/device/resolution

文件编码性能对比 http://blog.csdn.net/leixiaohua1020/article/details/19014955、

video格式及支持情况 https://caniuse.com/#search=video

WebM维基百科 https://en.wikipedia.org/wiki/WebM

Ogg维基百科https://en.wikipedia.org/wiki/Ogg

MPEG-4维基百科https://en.wikipedia.org/wiki/WebM

音视频常用术语https://wenku.baidu.com/view/23841d0b16fc700abb68fccd.html

网络api相关

https://www.baidufe.com/item/c4bacb3bd66930f2e43e.html

http://mqq.oa.com/api.html#js-mqq-device-getDeviceInfo

https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API

forwindows：MeGUI

http://www.swingworks.net/2012/04/dvdrip_with_megui/

https://www.apowersoft.com/video-converter-for-mac