HTML5 多媒体
1.互联网上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
2.插入音乐 <audio> 标签
目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
(1)基本使用
<!-- 添加controls属性才会显示控制面板，默认不会显示 -->
<audio controls>
<source src="./mp3/卡农慢摇版.mp3"></source>
</audio>
如图（每个浏览器效果都不一样）
(2)设置自动播放和播放次数
autoplay：如果出现该属性，则音频在就绪后马上播放。
loop：如果出现该属性，则每当音频结束时重新开始播放。
注意：Chrome在2018年10月份更新后关闭了audio、video媒体autoplay自动播放，新版的火狐也不支持。据说只是不支持mp3格式的自动播放，但是能够支持ogg格式的音频自动播放
<audio controls autoplay loop>
<source src="./mp3/卡农慢摇版.mp3"></source>
</audio>
(3)其他属性：
preload：auto|metadata|none 规定是否在页面加载后载入音频
muted：如果出现该属性，则音频输出为静音。
3.插入视频 <video> 标签
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
常用属性有：
controls：显示控制面板，默认不会显示
autoplay：如果出现该属性，则视频在就绪后马上播放。
loop：如果出现该属性，则当媒介文件完成播放后再次开始播放
width：宽度，默认为原媒体文件的宽度
height：高度，默认为原媒体文件的高度
poster：封面图片 默认为视频的第一帧
muted：如果出现该属性，视频的音频输出为静音。
reload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
<video controls>
<source src="./source/最终幻想神罗三巨头乱斗.mp4"></source>
</video>
4.<source> 标签
该标签为媒体元素（比如 <video> 和 <audio>）定义媒体资源，允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
source标签只能二选一
注释：IE 8 或更早版本的 IE 浏览器都不支持\ <source> 标签。
常用属性：
src：规定媒体资源的地址
type：规定媒体资源的 MIME 类型
<audio controls autoplay loop>
<source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
<source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
您的浏览器不支持 audio 元素。
</audio>
5.切换媒体文件
可以操作audio或者video的src属性来切换要播放的文件
<body>
<audio controls autoplay loop>
<source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
<source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
您的浏览器不支持 audio 元素。
</audio>
</body>
<script>
var audio = document.getElementsByTagName("audio")[0]
// 8秒钟后会切换到另一首歌
setTimeout(function(){
audio.src="./source/再见警察.mp3"
console.log(audio.src)
},8000)
</script>
6.自定义视频播放器
原生的播放控制面板在不同浏览器下的样式都不一样，所以一般使用的都是自定义的视频播放器。自定义视频播放器依然使用video标签，并隐藏原生的播放控制面板，使用自定义的控制面板，通过事件监听调用相关的API来操作视频的播放。
例如使用js来监听上一曲/下一曲，音量控制，进度条拖放控制等等。
注意：因为最新的浏览器已经屏蔽自动播放，而且直接调用js代码控制播放也是无效的，必须设置点击监听，在回调中才能控制播放
常用方法：
load() 加载视频
play() 播放视频
pause() 暂停视频
常用属性：
paused 视频是否是暂停状态
duration 视频长度（以秒计）
currentTime 可获取视频当前进度，也可以通过它控制播放进度（以秒计）
volume：音量（0到1，0就是静音，1就是100%）
src: 设置或返回音频/视频元素的当前来源
常用事件
oncanplay 用户可以开始播放视频时触发
ontimeupdate 播放进度更新时触发
onended 播放完毕时触发
onpause 当音频/视频已暂停时触发。
onplay 当音频/视频开始播放时触发。
HTML 音频/视频 DOM 参考手册
https://www.runoob.com/tags/ref-av-dom.html
