前言

?

项目中存在视频播放的功能，前期设计是以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>标签。主流浏览器的支持情况见下表：

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"');
}

?

?