一、发展历：
早期：<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的常用事件
四、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方法都是一样