网页视频播放器选择调研报告
可选方案:
html5 video标签
flash播放器
html5 + flash
简要说明:
html5: 由于各浏览器并没有对html5完美支持,单纯使用html5 video标签的方案无法满足需求。
Flash播放器:目前网页播放器主要都还是采用flash播放器,功能强大,API接口丰富,兼容性好,但是需要浏览器单独安装flash插件。
html5 + flash: 这种方案是一种主流趋势,由于html5原生支持video标签直接可以在浏览器中播放视频,不需要安装任何插件,在支持html5的浏览器采用这种方案,不支持html5的浏览器采用退化flash方案。
可行性分析:
各浏览器对html5 video标签支持情况
目前支持html5的浏览器包括:IE9+、chrome、firefox、opera、safari,虽然以上各浏览器的最新版本均支持html video标签,但是各浏览器对其支持的视频格式并不一致,如下表所示:
三种视频格式说明:
mp4:采用H.264编码方式
webm:采用VP8编码方式
ogg:采用Theora编码方式
目前html5 video标签支持以上三种格式的视频文件,但没有哪一种视频格式让所有浏览器都支持,所以同一视频文件必须要两种视频格式,才能兼容所有浏览器。
html5 video的一些局限性:
在IE9中无法实现全屏,这对用户体验肯定不好
播放的视频文件无法受保护(即DRM安全策略),用户可方便下载,这点也无法需求课程项目的需求
第三点就是上面分析的,各浏览器对其支持的视频格式不一致
html5 video的优势
html5 video比flash更稳定,flash在浏览器中经常容易出现’假死’的现象。
html5 video比flash更节省性能开销,尤其在移动设置硬件资源不是很充足的情况下,flash会更加耗电。
现有主流视频网站采用的一些方案:
例如优酷等主流视频网站在PC端都还是采用的flash播放器的方案,视频的格式为.flv,在移动端(iPad及iPhone等),为了让其播放视频,已经采用了的html5 video的方式,视频的格式为H.264编码的mp4。
初步方案的选择
通过以上的分析,由于html5视频播放的一些局限性,目前情况下还不适合在PC端使用,故在PC端全部采用flash播放器的方案。
由于ios不在支持flash,以及近期adobe也宣布不再为android平台提供flash支持,故在移动端使用html5视频播放,具体参考《手机端浏览器对html5 视频播放支持情况调研报告》
手机端浏览器对html5 视频播放支持情况调研报告
Android系统
各浏览器对视频格式支持情况
播放体验:
uc浏览器:播放html5视频时会自动全屏,体验不错。
手机qq浏览器:播放html5视频时,也会自动全屏,体验很好。
内置浏览器:播放视频时会自动调用系统内置播放器,体验比较好。
Chrome浏览器:播放时默认是直接在浏览器中播放,需要手动切换全屏。
Opera mobile: 不支持全屏,也不支持拖放,只能在浏览器中播放,体验不好。
ios系统
由于苹果app store不允许非webkit内核的浏览器进入,所以在ios中各浏览器都是基于webkit内核的,一般都支持mp4格式。
播放体验:有iPhone的同学可以测试下。
Window phone系统
和苹果app store一样,windows phone也不允许非ie内核的浏览器,目前最新的window phone 8内置IE10浏览器,对视频播放的支持还是很友好的。
播放体验:有window phone手机的同学可以体验下。
视频分辨率
320 * 240(小) 480 * 320(中) 640 * 480(pad)
综合方案
通过以上各浏览器在移动端html5 video的支持情况,大部分浏览器都有了比较好的支持,除了firefox及opera不支持mp4格式外,其余都支持mp4格式。所以如果在pc端用flash播放mp4格式的视频,这样一种视频格式就可以在pc及移动端都有比较好的支持。但是移动端采带宽的限制,和pc端相比,可能会采用更低的分辨率,这样的话,对同一个视频文件就需要多种不同的分辨率。
参考:
HTML5视频简介
Html5视频播放及API接口demo
HTML5视频播放时的一些局限性问题
手机浏览器内核调查
android移动设备将不再支持flash插件
测试浏览器对HTML5的支持情况
奇异移动版本体验(html5):
优酷ipad版本体验(html5):