1. HTML5之前对音频和视频都没有一个标准，页面上看见的视频都是通过第三插件的方式嵌入。
2. 容器：
视频文件：.avi，.mp4都是容器，将视频存储起来
|
主流的视频文件格式 |
主流的音频文件格式 |
|
MPEG-4：通常以.mp4为扩展名 |
MPEG-3：.mp3 |
|
Flash视频：通常以.flv为扩展名 |
Acc音频：.acc |
|
Ogg：通常以.ogv为扩展名 |
Ogg音频：.ogg |
|
WebM：通常以.webm为扩展名 |
|
|
音视频交错：通常以.avi为扩展名 |
|
3. 编解码器
音视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音视频能够播放。原始的媒体文件体积非常大：
若不对其编码，数据量惊人，在互联网上传播则要耗时；
若不对其解码，就无法将编码后的数据源重组为原始的媒体数据。
|
视频编解码器 |
音频编解码器 |
|
H.264 |
AAC |
|
VP8 |
MPEG-3 |
|
Ogg Theora |
Ogg vorbis |
注意：编解码器有些是收费的，有些是免费的，例如Ogg的Vorbis音视频编码器。Ogg的Theora视频编解码器也是免费的，而H.264是收费的。
视频编解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，不会存储每一帧的所有信息，而是存储两帧之间的差异信息。
编解码器分有损和无损，有损是研究重点：信息在编码过程中丢失无法避免，反复对视频编码会导致画面不均匀。
目前没有一种编解码器的组合能应用于所有的浏览器中；
4. 处理视频的一个流程：
制作一个Ogg容器中使用Theora视频和Vorbis音频的版本
制作另一个版本，使用WebM视频容器（VP8+Vorbis）
再制作一个版本，使用MP4视频容器，并使用H.264基本配置的视频和ACC低配的音频
链接上面3个文件到同一个video元素，并向后兼容基于Flash的视频播放器。
5. 音频：<audio></audio>
属性：
src：资源地址
controls：该属性定义是显示还是隐藏用户控制界面
Source：
视频：
type=’video/webm’; codecs=’vp8,vorbis’
type=’video/ogg’; codecs=’theora,vorbis’
type=’video/mp4’; codecs=’avc1.42E01E,mp4a.40.2’
音频：
type=’audio/ogg’; codecs=’vorbis’
type=’audio/aac’; codecs=’aac’
type=’audio/mpeg’
<video controls height="500px" width="500px"> <source src="resource/video/1.mp4" type="video/mp4"/> <source src="resource/video/1.ogv" type="video/ogg"/> <source src="resource/video/1.webm" type="video/webm"/> 当前浏览器不支持video直接播放，点击这里下载视频：<a href="resource/video/1.mp4">下载视频</a> </video> <audio controls> <source src="resource/audio/1.mp3" type="audio/mpeg"/> <source src="resource/audio/1.aac" type=‘audio/aac; codecs="aac"‘/> <source src="resource/audio/1.ogg" type=‘audio/ogg; codecs="vorbis"‘/> 当前浏览器不支持audio直接播放，点击这里下载视频：<a href="resource/audio/1.mp3">下载视频</a> </audio>
- 视频：<video></video>
height：视频显示区域的高度，单位是css像素
width：视频显示区域的宽度，单位是css像素
poster：一个海报帧的URL，用于在用户播放或者跳帧之前展示
src：要嵌到页面的视频的URL
controls：显示或隐藏用户的控制界面
autoplay：媒体是否自动播放
muted：将视频静音
preload：该属性告诉浏览器作者认为达到最佳的用户体验的方式是什么
none：提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量，提示浏览器该视频不需要缓存；
Metadata（默认值）：提示尽管作者认为用户不需要查看该视频，不过抓取元数据还是很合理的
auto：用户需要这个视频优先加载；提示：若需要，可以下载整个视频，即使用户不一定会用它。
空字符串：指代auto
<video height="500px" width="500px" controls autoplay loop muted poster="img/1.jpg" preload="none"> <source src="resource/video/1.mp4" type="video/mp4"/> 当前浏览器不支持video直接播放，点击这里下载视频：<a href="resource/video/1.mp4">下载视频</a> </video>
- 音频：<audio></audio>
src controls autoplay loop muted preload
2. 音视频js相关属性
currentTime：开始到播放现在所用的时间（可读写）
duration：媒体总时间（只读）
muted：是否静音(可读写，相比于volume优先级要高)
volume：0.0-1.0的音量相对值(可读写)
paused：媒体是否暂停(只读)
ended：媒体是否播放完毕(只读)
error：媒体发生错误的时候，返回错误代码(只读)
currentSrc ： 以字符串的形式返回媒体地址(只读)
var video=document.querySelector(‘video‘);
var audio=document.querySelector(‘audio‘);
setTimeout(function () {
console.log(video.duration);
console.log(audio.duration);
},500);
setInterval(function () {
console.log(video.currentTime);
console.log(audio.currentTime);
},1000)
//静音和音量：muted和volume之间不会同步，两个必须同时设置
//静音属性的优先级高
video.muted=true;
audio.muted=true;
video.volume=0;
audio.volume=0;
console.log(video.muted);
console.log(audio.muted);
console.log(video.volume);
console.log(audio.volume);
//是否暂停
console.log(video.paused);
console.log(audio.paused);
//播放是否结束
console.log(video.ended);
console.log(audio.ended);
//是否在播放时发生了错误
console.log(video.error);
console.log(audio.error);
//资源的地址
console.log(video.currentSrc);
console.log(audio.currentSrc);
视频多的部分：
poster：视频播放前的预览图片(读写)
width、height :设 置视频的尺寸(读写)
videoWidth、videoHeight视频的实际尺寸(只读)
//视频是否有海报
video.poster="img/1.jpg";
console.log(video.poster);
//视频的高度和宽度
console.log(video.width);
console.log(video.height);
setInterval(function () {
//视频本身的分辨率
console.log(video.videoWidth);
console.log(video.videoHeight);
},1000)
音视频js相关函数
play()：媒体播放
pause()：媒体暂停
load()：重新加载媒体
video.play();
audio.play();
//5秒之后视频音频暂停
setTimeout(function () {
video.pause();
audio.pause();
},5000)
//在此处修改source地址，必须加video.load()，才能实现
var source=document.querySelectorAll("source");
source[0].src="xxx";
source[1].src="xxx";
video.load();
audio.load();