Video ABC

目前在网页中插入视频最简单的办法是利用HTML5 Video标签．缺点是并不是所有浏览器都支持，尤其是IE.

各浏览器对Video元素支持情况：

IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
9.0+	3.5+	3.0+	3.0+	10.5+	1.0+	9.0+

基本知识

 １，VIDEO CONTAINERS

我们所看到的"avi"或"mp4"其实只是一个container formats．就像zip文件一样，可以包括许多种类的文件在其中．video container formats只定义怎么存放文件在其中，并不考虑其中的内容． 

 ２，主要的container formats

video container formats	extension	memo
MPEG 4	.mp4 or .m4v
Flash Video	.flv	9.0.60.184 之前的Flash唯一支持的格式
Ogg	.ogv	open source Firefox 3.5, Chrome 4, and Opera 10.5 support
WebM	.webm	只用于 VP8 video codec and Vorbis audio codec.
Audio Video Interleave	.avi	Microsoft产品

 

３， Video Player工作过程

当你欣赏一部电影时，你的Video Player做了如下三件事情：

1. 解析 container format，以便查找能得到哪些video和audio tracks． 
2. 对video stream解码，并显示一系列的图片在屏幕上
3. 对audio stream解码并把声音发送到speakers．

 

４， 主要的video codecs 

Name	memo
H.264	also known as “MPEG-4 part 10,” a.k.a. “MPEG-4 AVC,” a.k.a. “MPEG-4 Advanced Video Coding.
Theora	evolved from the VP3 codec and has subsequently been developed by the Xiph.org Foundation royalty-free codec
VP8	由On2开发, 2010, 被Google 收购并开源.

 

５，主要的audio codecs 

Name	memo
MPEG-1 Audio Layer 3	MP3： 最多支持２声道．
Advanced Audio Coding	也叫做”AAC”, 1997年标准化，iTunes Store的默认格式.
Vorbis	通常叫做 “Ogg Vorbis”

6, 各浏览器对Video编解码支持情况

CODECS/CONTAINER	IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
Theora+Vorbis+Ogg	·	3.5+	?	5.0+	10.5+	·	·
H.264+AAC+MP4	9.0+	·	3.0+	·	·	3.0+	2.0+
WebM	9.0+	4.0+	?	6.0+	10.6+	·	2.3+

7, 代码：

由上可知没有哪种container能在所有浏览器上运行．

所幸一个<video>标签可以链接到多个视频文件．并且浏览器能选择它所支持的格式播放．

<video width="640" height="360" controls autoplay>
	<!-- MP4 must be first for iPad! -->
	<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"  /><!-- Safari / iOS, IE9 -->
	<source src="http://clips.vorwaerts-gmbh.de/VfE.webm"      type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
	<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"       type="video/ogg"  /><!-- Firefox3.6+ / Opera 10.5+ -->
</video>

8, 视频转码工具

HandBrake: http://handbrake.fr/downloads.php　用于转换成MP4格式

实例：

     转换前:1920*1080，size:156M

     转换参数：640*360  size: 4M 

　  重要勾选参数, 1,Web optimized 2, 2-Pass Encoding & Turbo first Pass

FIREFOGG: http://firefogg.org/  转换成webm格式

用上面的输出转换(640*360  size: 4M ), 得到结果为1.5M的webm文件．

注意下载最新的firefox,　我的测试版本为firefox 11.0

相关文章：

http://mediaelementjs.com/    --免费的播放器，支持htm5,flash, My Final Choice.

http://diveintohtml5.info/video.html

http://camendesign.com/code/video_for_everybody

http://webplayer.yahoo.com/

http://videojs.com/

http://dev.opera.com/articles/view/introduction-html5-video/

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/