一、发展历：
早期：<embed>+<object>+文件
问题：不是所有浏览器都支持，而且embed不是标准。
现状：Realplay、window media、Quick Time 、Flash
问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。
HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！
二、视频格式的简单介绍
1、常见的视频格式
视频的组成部分：画面、音频、编码格式
视频编码：H.264、Theora、VP8(google开源)
常见的音频格式
音频编码：ACC、MP3、Vorbis
2、HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件 支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
三、<Video>
1.标签的使用：
<video src="文件地址" controls="controls"></video>
IE9以上才支持HTML5，对于不支持的浏览器应该有友好的提示：
<video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >
再优化：让video标签载入多种不同的音频格式，让浏览器选择他支持的格式，第一个找到了播放第一条，没找到找第二天，以此类推，最后还没找到给出提示不支持
<video controls="controls" width="600">
<source src="movie.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
2.Video标签的常见属性
<video src="movie.ogg" controls="controls" Loop="Loop" poster="PLMM.jpg" id="video">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
3.Video的API方法
4.Video的API属性
<body>
<video src="movie.webm" controls="controls" id="video">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<br />
<button onClick="bofang()">播放</button>
<button onClick="zanting()">暂停</button>
<button onClick="kuaijin()">快进</button>
<button onClick="kuaitui()">快退</button>
<button onClick="jingyin(this)">静音</button>
<button onClick="jiansu()">减速</button>
<button onClick="jiasu()">加速</button>
<button onClick="normal()">正常播放</button>
<button onClick="up()">增大音量</button>
<button onClick="down()">减小音量</button>
<script>
//获取对应的video标签
var video = document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
//暂停方法
function zanting(){
video.pause();
}
//快进按钮
function kuaijin(){
video.currentTime+=10;//currentTime该属性是获取当前播放的时间，加加上10就快进10秒
}
//快退
function kuaitui(){
video.currentTime-=10;
}
//静音
function jingyin(obj){
if(video.muted){
obj.innerHTML='静音';
video.muted=false;
}else{
obj.innerHTML='关闭静音';
video.muted=true;
}
}
//加速播放(快3倍) //要想慢3倍，应该是3分之1，因为当前是1
function jiansu(){
video.playbackRate = 1/3;
}
//减速播放(慢3倍)
function jiasu(){
video.playbackRate=3;
}
//正常播放
function normal(){
video.playbackRate=1;
}
//调大音量,音量值的范围是0到1
function up(){
video.volume+=0.2;
}
//调小声音
function down(){
video.volume-=0.2;
}
</script>
</body>
</html>
5.Video的常用事件
1、获取视频时间长度
当视频载入video后，使用 onloadedmetadata 事件获取视频的时间长度。
当视频载入video后，使用 onloadedmetadata 事件获取视频的时间长度。
video.onloadedmetadata = function () {
var vLength = video.duration;
console.log(vLength);
}
2、当前视频的播放进度
当视频开始播放时，可以使用 ontimeupdate 事件获取视频当前播放的进度。当video对象的 currentTime 属性发生改变时触发 ontimeupdate 事件。currentTime 属性是浮点小数，可取到 12 位数的小数位数。
video.ontimeupdate = function () {
var vTime = video.currentTime;
console.log(vTime);
};
四、HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
五、<audio>
1.标签的使用
<audio src="文件地址" controls="controls"></audio>
IE9以上才支持HTML5，对于不支持的浏览器应该有友好的提示：
<audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ audio >
再优化：让video标签载入多种不同的音频格式，让浏览器选择他支持的格式，第一个找到了播放第一条，没找到找第二天，以此类推，最后还没找到给出提示不支持
< audio controls="controls" >
<source src="happy.MP3" type="video/mp3" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
audio的常见属性
该标签除了一些属性不同外，其他API方法都是一样