2024年2月6日发(作者：乙勇捷)

Word-文档交流

网页视频播放器选择调研报告

2019年

可选方案：

 html5 video标签

 flash播放器

 html5 + flash

简要说明：

 html5: 由于各浏览器并没有对html5完美支持，单纯使用html5 video标签的方案无法满足需求。

 Flash播放器：目前网页播放器主要都还是采用flash播放器，功能强大，API接口丰富，兼容性好，但是需要浏览器单独安装flash插件。

 html5 + flash: 这种方案是一种主流趋势，由于html5原生支持video标签直接可以在浏览器中播放视频，不需要安装任何插件，在支持html5的浏览器采用这种方案，不支持html5的浏览器采用退化flash方案。

可行性分析：

1. 各浏览器对html5 video标签支持情况

目前支持html5的浏览器包括：IE9+、chrome、firefox、opera、safari,虽然以上各浏览器的最新版本均支持html video标签，但是各浏览器对其支持的视频格式并不一致，如下表所示：

浏览器

IE9

Firefox

Chrome

Safari

opera

mp4











第 1 页 共 4 页

ogg











webm











Word-文档交流

2. 三种视频格式说明：

 mp4：采用H.264编码方式

 webm：采用VP8编码方式

 ogg：采用Theora编码方式

目前html5 video标签支持以上三种格式的视频文件，但没有哪一种视频格式让所有浏览器都支持，所以同一视频文件必须要两种视频格式，才能兼容所有浏览器。

3. html5 video的一些局限性：

 在IE9中无法实现全屏，这对用户体验肯定不好

 播放的视频文件无法受保护（即DRM安全策略），用户可方便下载，这点也无法需求课程项目的需求

 第三点就是上面分析的，各浏览器对其支持的视频格式不一致

4. html5 video的优势

 html5 video比flash更稳定，flash在浏览器中经常容易出现’假死’的现象。

 html5 video比flash更节省性能开销，尤其在移动设置硬件资源不是很充足的情况下，flash会更加耗电。

5. 现有主流视频网站采用的一些方案：

例如优酷等主流视频网站在PC端都还是采用的flash播放器的方案，视频的格式为.flv，在移动端(iPad及iPhone等)，为了让其播放视频，已经采用了的html5 video的方式，视频的格式为H.264编码的mp4。

6. 初步方案的选择

通过以上的分析，由于html5视频播放的一些局限性，目前情况下还不适合在PC端使用，故在PC端全部采用flash播放器的方案。

由于ios不在支持flash，以及近期adobe也宣布不再为android平台提供flash支持，故在移动端使用html5视频播放，具体参考《手机端浏览器对html5 视频播放支持情况调研报告》

第 2 页 共 4 页

Word-文档交流

手机端浏览器对html5 视频播放支持情况调研报告

Android系统

各浏览器对视频格式支持情况

浏览器

内置浏览器(Chrome Lite)

uc浏览器

qq浏览器

Chrome

Firefox

Opera mobile

Opera mini

播放体验：

 uc浏览器：播放html5视频时会自动全屏，体验不错。

 手机qq浏览器：播放html5视频时，也会自动全屏，体验很好。

 内置浏览器：播放视频时会自动调用系统内置播放器，体验比较好。

 Chrome浏览器：播放时默认是直接在浏览器中播放，需要手动切换全屏。

 Opera mobile: 不支持全屏，也不支持拖放，只能在浏览器中播放，体验不好。

mp4















ogg















webm















ios系统

由于苹果app store不允许非webkit内核的浏览器进入，所以在ios中各浏览器都是基于webkit内核的，一般都支持mp4格式。

播放体验：有iPhone的同学可以测试下。

Window phone系统

和苹果app store一样，windows phone也不允许非ie内核的浏览器，目前最新的window phone 8内置IE10浏览器，对视频播放的支持还是很友好的。

播放体验：有window phone手机的同学可以体验下。

视频分辨率

第 3 页 共 4 页

Word-文档交流

320 * 240(小) 480 * 320(中) 640 * 480(pad)

综合方案

通过以上各浏览器在移动端html5 video的支持情况，大部分浏览器都有了比较好的支持，除了firefox及opera不支持mp4格式外，其余都支持mp4格式。所以如果在pc端用flash播放mp4格式的视频，这样一种视频格式就可以在pc及移动端都有比较好的支持。但是移动端采带宽的限制，和pc端相比，可能会采用更低的分辨率，这样的话，对同一个视频文件就需要多种不同的分辨率。

参考：

HTML5视频简介

/developerworks/cn/web/wa-html5video/

Html5视频播放及API接口demo

/2010/05/video/

HTML5视频播放时的一些局限性问题

/2011/12/

手机浏览器内核调查

/articles/

android移动设备将不再支持flash插件

/p/

测试浏览器对HTML5的支持情况

/

奇异移动版本体验(html5)：

优酷ipad版本体验(html5)：

/ipad

第 4 页 共 4 页

2024年2月6日发(作者：乙勇捷)

Word-文档交流

网页视频播放器选择调研报告

2019年

可选方案：

 html5 video标签

 flash播放器

 html5 + flash

简要说明：

 html5: 由于各浏览器并没有对html5完美支持，单纯使用html5 video标签的方案无法满足需求。

 Flash播放器：目前网页播放器主要都还是采用flash播放器，功能强大，API接口丰富，兼容性好，但是需要浏览器单独安装flash插件。

 html5 + flash: 这种方案是一种主流趋势，由于html5原生支持video标签直接可以在浏览器中播放视频，不需要安装任何插件，在支持html5的浏览器采用这种方案，不支持html5的浏览器采用退化flash方案。

可行性分析：

1. 各浏览器对html5 video标签支持情况

目前支持html5的浏览器包括：IE9+、chrome、firefox、opera、safari,虽然以上各浏览器的最新版本均支持html video标签，但是各浏览器对其支持的视频格式并不一致，如下表所示：

浏览器

IE9

Firefox

Chrome

Safari

opera

mp4











第 1 页 共 4 页

ogg











webm











Word-文档交流

2. 三种视频格式说明：

 mp4：采用H.264编码方式

 webm：采用VP8编码方式

 ogg：采用Theora编码方式

目前html5 video标签支持以上三种格式的视频文件，但没有哪一种视频格式让所有浏览器都支持，所以同一视频文件必须要两种视频格式，才能兼容所有浏览器。

3. html5 video的一些局限性：

 在IE9中无法实现全屏，这对用户体验肯定不好

 播放的视频文件无法受保护（即DRM安全策略），用户可方便下载，这点也无法需求课程项目的需求

 第三点就是上面分析的，各浏览器对其支持的视频格式不一致

4. html5 video的优势

 html5 video比flash更稳定，flash在浏览器中经常容易出现’假死’的现象。

 html5 video比flash更节省性能开销，尤其在移动设置硬件资源不是很充足的情况下，flash会更加耗电。

5. 现有主流视频网站采用的一些方案：

例如优酷等主流视频网站在PC端都还是采用的flash播放器的方案，视频的格式为.flv，在移动端(iPad及iPhone等)，为了让其播放视频，已经采用了的html5 video的方式，视频的格式为H.264编码的mp4。

6. 初步方案的选择

通过以上的分析，由于html5视频播放的一些局限性，目前情况下还不适合在PC端使用，故在PC端全部采用flash播放器的方案。

由于ios不在支持flash，以及近期adobe也宣布不再为android平台提供flash支持，故在移动端使用html5视频播放，具体参考《手机端浏览器对html5 视频播放支持情况调研报告》

第 2 页 共 4 页

Word-文档交流

手机端浏览器对html5 视频播放支持情况调研报告

Android系统

各浏览器对视频格式支持情况

浏览器

内置浏览器(Chrome Lite)

uc浏览器

qq浏览器

Chrome

Firefox

Opera mobile

Opera mini

播放体验：

 uc浏览器：播放html5视频时会自动全屏，体验不错。

 手机qq浏览器：播放html5视频时，也会自动全屏，体验很好。

 内置浏览器：播放视频时会自动调用系统内置播放器，体验比较好。

 Chrome浏览器：播放时默认是直接在浏览器中播放，需要手动切换全屏。

 Opera mobile: 不支持全屏，也不支持拖放，只能在浏览器中播放，体验不好。

mp4















ogg















webm















ios系统

由于苹果app store不允许非webkit内核的浏览器进入，所以在ios中各浏览器都是基于webkit内核的，一般都支持mp4格式。

播放体验：有iPhone的同学可以测试下。

Window phone系统

和苹果app store一样，windows phone也不允许非ie内核的浏览器，目前最新的window phone 8内置IE10浏览器，对视频播放的支持还是很友好的。

播放体验：有window phone手机的同学可以体验下。

视频分辨率

第 3 页 共 4 页

Word-文档交流

320 * 240(小) 480 * 320(中) 640 * 480(pad)

综合方案

通过以上各浏览器在移动端html5 video的支持情况，大部分浏览器都有了比较好的支持，除了firefox及opera不支持mp4格式外，其余都支持mp4格式。所以如果在pc端用flash播放mp4格式的视频，这样一种视频格式就可以在pc及移动端都有比较好的支持。但是移动端采带宽的限制，和pc端相比，可能会采用更低的分辨率，这样的话，对同一个视频文件就需要多种不同的分辨率。

参考：

HTML5视频简介

/developerworks/cn/web/wa-html5video/

Html5视频播放及API接口demo

/2010/05/video/

HTML5视频播放时的一些局限性问题

/2011/12/

手机浏览器内核调查

/articles/

android移动设备将不再支持flash插件

/p/

测试浏览器对HTML5的支持情况

/

奇异移动版本体验(html5)：

优酷ipad版本体验(html5)：

/ipad

第 4 页 共 4 页