【设计日记】是腾讯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
领取专属 10元无门槛券
私享最新 技术干货