由html5视频播放引发的总结 博客分类: html5视频技术 html5video视频
前言
项目中存在视频播放的功能,前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备,必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解,不了解不知道,水真是很深。本文所记录的知识一些浅尝辄止的知识,说起来很惭愧。
视频结构
本该直接介绍html5的<video>的,但鉴于本人对视频结构的模糊,先简单了解一下:
通常我们会以为视频文件就是“AVI文件”、“MP4文件”等,但事实上,“AVI”和“MP4”只是容器的格式。视频容器格式只决定怎么在一个文件中存储视频和音频流,至于存储什么样的内容,与其没有关系,我们可以拿ZIP压缩文件来与之类比。
在视频的制作和播放过程中,会涉及到视频编解码器和音频编解码器。这些编解码器都很多,这里只列举相关的。
视频编解码器:H264、Theora和VP8
音频编解码器:MP3、AAC和Vorbis
在我们观看视频时,视频播放器主要做了如下工作:
①解析容器格式以找出可以使用的视频和音频轨道,并分析出它们的存储结构,以便接下来的解码工作。
②对视频流解码,并在屏幕上显示一幅幅的图像。
③对音频流解码,同时给扬声器传输声音信号。
为此,我们便对视频的结构有了一个基本的了解,以便于下面说明html5的<video>标签目前的支持情况。
html5的<video>
html5定义了<video>标签,用于在网页中嵌入视频。示例如下:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
令人遗憾的是,并不是所有的浏览器都支持或者说是都完全支持<video>标签。主流浏览器的支持情况见下表:
Browser | MP4 | WebM | Ogg |
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox |
NO(Firefox 21 running on Windows 7,Windows 8, Windows Vista,and Android now supports MP4) |
YES | YES |
Safari | YES | NO | NO |
Opera | NO | YES | YES |
MP4 = H264视频编码和AAC音频编码
WebM = VP8视频编码和Vorbis音频编码
Ogg = Theora视频编码和Vorbis音频编码
检测您使用的浏览器是否支持html5的<video>,请调用如下javascript代码:
function supports_video() { return !!document.createElement('video').canPlayType; }
检测对于视频格式的支持,请调用如下代码:
function supports_h264_video() { if (!supports_video()) return false; var v = document.createElement('video'); return canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); }
上一篇: 正则表达式 一些用法 表
下一篇: 轮播图 jQuery