一、视频的格式
目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：
H.264(个人不看好)：这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。在编码及传输过程中的任何部分都可能需要收取专利费。因此Safari（苹果的浏览器）和Intenet Explorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。
Theora:这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。Chrome、Firefox以及Opera支持该编码器。
VP8：该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。Chrome、Firefox以及Opera支持该编码器。
AAC:音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和Internet Explorer支持该音频编码器。
MP3：也是一个专利技术，Safari、Chrome和Internet Explorer支持该音频编码器。
PCM:存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和Internet Explorer支持该音频编码器。
Vorbis:文件扩展名为.ogg，有时候也被称为Ogg Vorbis,该音频编码器不受专利保护，因此版权免费。支持的浏览器包括Chrome、Firefox和Opera.
主流浏览器和设备支持的视频和音频
二、HTML5中的<vido>属性
在html5中可以使用<audio>或者<video>标签播放html5媒体，使用方式如下
<video src="move.mp4"></video>
video标签中有很多属性，例如controls属性可以控制是否有控制台。
<video src="move.mp4" controls="controls">
浏览器不支持HTML5的视频播放功能
</video>从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用<source>标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。
<video width="400" controls="controls">
<source src="move.mp4" type="video/mp4" />
<source src="move.ogg" type="video/ogg" />
</video>三、制作视频播放器
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo 1 | Custom HTML5 Video Controls with jQuery</title>
<link rel="stylesheet" href="../vendorstyle.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../vendorscript.js"></script>
<script src="video.js"></script>
<!--[if lt IE 9]>
<script>
$(document).ready(function() {
$('.control').hide();
$('.loading').fadeOut(500);
$('.caption').fadeOut(500);
});
</script>
<![endif]-->
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson/favicon.ico" />
</head>
<body>
<!-- Header -->
<header>
<h1>Custom HTML5 Video Controls with jQuery</h1>
<p id="backlinks">
<a href="http://www.inwebson.com/custom-html5-video-controls-with-jquery-and-css/">BACK TO ARTICLE ?</a>
<a href="http://www.inwebson.com">Visit inWebson.com ?</a>
</p>
<p class="clearfix"></p>
</header>
<!-- Content -->
<section id="wrapper">
<!-- Title -->
<h2>Demo 1</h2>
<h3>Custom HTML5 Video Controls</h3>
<p class="videoContainer">
<video id="myVideo" controls preload="auto" poster="poster.jpg" width="600" height="350" >
<source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
<source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>
<p class="caption">This is HTML5 video with custom controls</p>
<p class="control">
<p class="topControl">
<p class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</p>
<p class="time">
<span class="current"></span> /
<span class="duration"></span>
</p>
</p>
<p class="btmControl">
<p class="btnPlay btn" title="Play/Pause video"></p>
<p class="btnStop btn" title="Stop video"></p>
<p class="spdText btn">Speed: </p>
<p class="btnx1 btn text selected" title="Normal speed">x1</p>
<p class="btnx3 btn text" title="Fast forward x3">x3</p>
<p class="btnFS btn" title="Switch to full screen"></p>
<p class="btnLight lighton btn" title="Turn on/off light"></p>
<p class="volume" title="Set volume">
<span class="volumeBar"></span>
</p>
<p class="sound sound2 btn" title="Mute/Unmute sound"></p>
</p>
</p>
<p class="loading"></p>
</p>
<!-- Navigation -->
<nav id="navigation">
<ul>
<li class="currentbtn"><a href="#" title="Demo 1">DEMO 1</a></li>
<li><a href="../demo2/" title="Demo 2">DEMO 2</a></li>
</ul>
<p class="clearfix"></p>
</nav>
</section>
<!-- Footer -->
<footer>
<span>? 2011 <a href="http://www.inwebson.com">inWebson.com</a>.
Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>.
Powered by <a href="http://www.inwebson.com/html5/">HTML5</a> and
<a href="http://www.inwebson.com/jquery/">jQuery</a>.</span>
</footer>
</body>
</html>style.css
/* video container */
.videoContainer{
width:600px;
height:350px;
position:relative;
overflow:hidden;
background:#000;