音频格式：mp3, ogg, wav.
视频格式：mp4, ogv, webm.
历史：早期使用Flash, html5 后使用video/ audio.
video/audio 标签及其常用属性
- controls
- autoplay
- loop
- source
- preload
- poster(video)【视频播放前显示的封面】
以视频为例：
<video src="media/badfox.mp4" width="640px" autoplay="autoplay" controls="controls" loop="loop">
您的浏览器不支持video 标签
</video>
<video width="640px" autoplay="autoplay" controls="controls" loop="loop" poster="xxx.jpg" preload="preload">
<!-- 只会显示最先能显示出来的视频资源 -->
<!-- 以下三种格式，基本可以兼容所有浏览器 -->
<source src="media/xxx.mp4" type="video/mp4">
<source src="media/xxx.ogv" type="video/ogv">
<source src="media/xxx.webm" type="video/webm">
</video>其中，preload 属性有三个值：auto meta none. 分别表示，加载数据与元数据，只加载元数据，不加载数据不加载元数据。
video/audio API 事件
- loadedmetadata（加载完元数据触发的事件） - seeking（拖动视频进度条，需对视频进行重定位）
- progress（请求视频数据） - waiting（网络上视频，下一帧图像需要缓冲时）
- canplay（可以播放） - volumechange（声音变化）
- canplaythrough（可以一直播放到结束） - ended（视频结束）
- timeupdate（时间进度在更新，在播放时会一直触发） - pause（视频暂停）
<video src="media/badfox.mp4" id="myvideo" width="640px" autoplay="autoplay" controls="controls">
浏览器不支持视频（video）
</video>
<script type="text/javascript">
var v = document.getElementById("myvideo");
// 加载元数据
v.onloadedmetadata = function(){
console.log("loadedmetadata")
}
</script>video/audio API 属性
- currentSrc -ended
- duration - muted
- currentTime - playbackRate
- volume - buffered
- paused
<script type="text/javascript">
var v = document.getElementById("myvideo");
var startbtn = document.getElementById("start");
var pausebtn = document.getElementById("pause");
// 加载元数据
v.onloadedmetadata = function(){
console.log("loadedmetadata");
console.log("视频地址：" + v.currentSrc);
console.log("视频总时长：" + v.duration);
console.log("视频播放速率：" + v.playbackRate);
console.log("是否暂停：" + v.paused);
console.log("是否结束：" + v.ended);
console.log("是否静音：" + v.muted);
}
v.ontimeupdate = function(){
console.log("视频当前时间：" + v.currentTime);
console.log("当前缓冲量：" + v.buffered.end(0));
}
v.onvolumechange = function(){
console.log("当前音量：" + v.volume);
}
startbtn.onclick = function(){
// 播放
v.play();
};
pausebtn.onclick = function(){
// 暂停
v.pause();
}
</script>