Video：加载视频
audio：加载音频
object，embed：加载flash等（随着h5的普及，flash已经开始逐渐退出舞台了）
iframe：加载资源
video
基本用法
<video src="" controls>您的浏览器不支持内嵌视频</video>| 属性 | 类型 | 描述 |
| controls | - | 是否显示控件，比如播放按钮 |
| autoplay | boolean | 是否自动播放 |
| preload | none|metadata|audo | 是否预加载 |
| loop | boolean | 是否自动循环播放 |
| muted | boolean | 是否静音 |
| poster | URL | 用户点击播放按钮前显示的图像 |
| src | url | 媒体文件的URL |
| width | pixels | 播放器的宽度 |
| height | pixels | 播放器的高度 |
poster
设置poster之后，当用户打开页面，到未播放视频时，浏览器界面显示的图片
不同的环境配置不同的媒体资源
目前原生的H5支持多媒体格式主要有mp4,ogg,webm,m3u8，不同的媒体编码格式存在专利和产权的问题，所以不同浏览器对媒体的格式支持也不同，具体查看MDN
因此，在video标签内嵌套多个source标签达成不同的兼容环境
<video controls>
<source src="" type="video/mp4">
<source src="" type="video/webm">
您的浏览器不支持内嵌视频
</video>常用方法
canPlayType：检测浏览器是否能播放不同类型的视频
返回值：
Probably：浏览器最可能支持
maybe：浏览器可能支持
空字符串：浏览器不支持
paly：开始播放
pause：暂停播放
let video=document.getElementBy('aa');
video.play();
video.pause();常用事件
除了支持click，mouseover等常用事件外，还有一些专属的事件
| 事件名称 | 事件描述 |
| canplay | 在媒体数据已经有足够的数据可播放时触发 |
| pause | 播放暂停时触发 |
| play | 暂停后再次开始播放时触发 |
| seeked | 在跳跃操作完成时触发 |
| volumechange | 在音量改变时触发 |
| ended | 播放结束时触发 |
| ..... |
示例，在加载到能播放时播放
let a=document.getElementById('aa');
a.addEventListener('canplay',function(){
a.play()
})常用属性
currentTime：当前播放到的时间
currentSrc：当前视频地址
controls：是否展示控件
duration：视频长度
played：已经播放过时间范围区间
audio
基本用法
<audio src="" controls>您的浏览器不支持内嵌音频</audio >也可以通过内嵌source来支持不同浏览器播放不同格式的音频
| 属性 | 类型 | 描述 |
| controls | - | 是否显示控件，比如播放按钮 |
| autoplay | boolean | 是否自动播放 |
| preload | none|metadata|audo | 是否预加载 |
| loop | boolean | 是否自动循环播放 |
| muted | boolean | 是否静音 |
| poster | URL | 用户点击播放按钮前显示的图像 |
| src | url | 媒体文件的URL |
常用方法
canPlayType：检测浏览器是否能播放不同类型的音频
返回值：
Probably：浏览器最可能支持
maybe：浏览器可能支持
空字符串：浏览器不支持
paly：开始播放
pause：暂停播放
常用事件
除了支持click，mouseover等常用事件外，还有一些专属的事件
| 事件名称 | 事件描述 |
| canplay | 在媒体数据已经有足够的数据可播放时触发 |
| pause | 播放暂停时触发 |
| play | 暂停后再次开始播放时触发 |
| seeked | 在跳跃操作完成时触发 |
| volumechange | 在音量改变时触发 |
| ended | 播放结束时触发 |
| ..... |
常用属性
currentTime：当前播放到的时间
currentSrc：当前视频地址
controls：是否展示控件
duration：音频长度
played：已经播放过时间范围区间
<input id="input" type="file" accept=".mp3,.ogg">
<audio controls id="aa">
您的浏览器不支持内嵌视频
</audio>
<script>
let input=document.getElementById('input');
let audio=document.getElementById('aa');
let lastSrc='';
input.addEventListener('change',function (event) {
let file= event.target.files[0];
if(file){
if(lastSrc){
URL.revokeObjectURL(lastSrc);
}
let src=URL.createObjectURL(file);
lastSrc = src;
audio.setAttribute('src',src);
audio.play();
}
});
</script>createObjectURL()，该方法接受一个File对象或者Blob对象，创建一个指向该参数对象的URL
revokeObjectURL()，通过createObjectURL()创建的URL会一直存储在浏览器上，为了减少浏览器的内存使用，我们需要释放一个通过URL.createObjectURL()创建的对象URL，这边也就是赋值的lastSrc，通过释放这个URL减少，内存的使用