HTML5 中 新增了 <autdio> 和 <video> ，可以让人们不需要 Flash等插件 就能在网页中嵌入音频和视频内容。
1、用法和属性
src：指向媒体文件
width：设定元素宽度
height：设定元素高度
poster：指定加载视频是显示的图像的URI
controls：显示自带UI控件
因为并非每个浏览器都支持所有媒体格式，所以可以指定多个媒体来源，不用再标签中指定 src 属性，可以在标签内使用一个或多个<source>
<div>
<video id="video" width="500px" height="400px" poster="img/BG.png" controls autoplay="autoplay">
<source src="media/v1.mp4" type="video/mp4" >
不支持视频播放
</video>
<br>
<video src="media/v1.mp4" width="500px" height="400px"></video>
<br>
<audio id="" controls style="height: 100px; width: 500px">
<source src="media/au1.mp3">
</audio>
<br>
<audio src="media/au1.mp3" controls></audio>
</div>
2、<video> 和 <audio> 元素共有的属性
autoplay：布尔值，取得或设置自动播放标志
buffered：事件范围，表示已下载的缓冲事件范围的对象
bufferedBytes：字节范围，表示已下载的缓冲的字节范围对象
bufferingRate：整数，下载过程中每秒平均接受到的位数
bufferingThrottled：布尔值，表示浏览器是否对缓冲进行了节流
controls：布尔值，取得或设置controls属性，用于显示或隐藏浏览器内置的控件
currentLoop：整数，媒体文件已经循环的次数
currentSrc：字符串，当前播放文件的URL
currentTime：浮点数，以播放的秒数
defaultPlaybackRate：浮点数，取得或设置默认的播放速度。默认是1.0秒，只能开发人员修改
duration：浮点数，媒体总播放时间（秒数）
ended：布尔值，表示媒体文件是否播放完成
loop：布尔值，取得或设置媒体文件是否循环播放
muted：布尔值，取得或设置是否静音
networkState：整数，表示当前媒体网络连接状态：0表示空，1表示正在加载，2表示正在加载元数据，3表示已经加载了第一帧，4表示加载完成
paused：布尔值，表示播放器是否暂停
playbackRate：浮点数，取得或设置当前的播放速度。用户可以改变这个值，让媒体播放速度变快或变慢
played：事件范围，到目前为止已经播放的事件范围
readyState：整数，表示媒体是否就绪。0表示数据不可用，1表示可以显示当前帧，2表示可以开始播放，3表示 媒体可以从头到尾播放
seekable：时间范围，可以搜索的时间范围
seeking：布尔值，表示播放器是否正在移动到文件中的新位置
src：字符串，媒体文件的来源。任何时候都可以重写这个属性
start：浮点数，取得或设置媒体文件中开始播放的位置，以秒表示
totalBytes：整数，当前资源的总字节数
videoHeight：整数，视频（不一定是元素）的高度，适用于<video>
videoWidth：整数，视频（不一定是元素）的宽度，适用于<video>
volume：浮点数，取得或设置当前音量，职位 0.0 到 1.0
很多属性也可以直接在<audio> 和 <video> 元素中直接设置
3、事件
<audio> 和 <video> 可以触发很多事件，这些事件监控着不同属性的变化，这些变化可能是媒体播放的结果，也可能是用户操作播放器的结果
| 事 件 | 触发时机 |
| abort | 下载中段 |
| canplay | 可以播放时，readyState 值为2 |
| canplaythrough | 可以播放，而且应该不会中断，readyState 值为3 |
| canshowcurrentframe | 当前帧已经下载完成，readyState 值为1 |
| dataunavailable | 数据未准备好，readyState 值为0 |
| durationchange | duration 属性的值改变 |
| emptied | 网络连接关闭 |
| empty | 发生错误阻止了媒体下载 |
| error | 下载期间发生网络错误 |
| load | 所有媒体已加载完成（废除了） |
| loadeddata | 媒体第一帧已经加载完成 |
| loadedmetadata | 媒体的元数据已加载完成 |
| loadstart | 下载以开始 |
| pause | 播放已暂停 |
| play | 播放开始 |
| playing | 正在播放 |
| progress | 正在下载 |
| ratechange | 播放速度改变 |
| seeked | 搜索结束 |
| seeking | 正移动到新位置 |
| stalled | 浏览器尝试下载，但未接收到数据 |
| timeupdate | currentTime被不合理或意外地更新 |
| volumechange | volume属性值或muted属性值已改变 |
| waiting | 播放暂停，等待下载更多数据 |
4、方法
play() ：开始播放
pause()：暂停播放
canPlayType(mediaType)：检测浏览器是否支持给定的mime类型的格式的媒体文件。返回值可能是：'probably'（可播放），'maybe'（一般情况也是可播放），' '（空字符串，不可播放）。
可能的mime类型：audio/mp4，audio/mpeg，audio/ogg，audio/wav，video/mp4，video/ogg，video/webm
<audio>元素还有一个原生的JavaScript 构造函数Audio，可以在任何时候播放音频。可以直接创建一个新实例，并传入文件路径，下载完成后就可以调用 play()播放
let btn = document.querySelector("#btn");
btn.addEventListener("click",evt => {
var audio = new Audio("media/au1.mp3");
audio.addEventListener("canplaythrough",ev => {
audio.play();
},false);
},false);