文章目录
- [1. 背景](#1. 背景)
- [2. audio音频](#2. audio音频)
- [3. video视频](#3. video视频)
- [4. audio与video常用属性](#4. audio与video常用属性)
- [5. 小结](#5. 小结)
1. 背景
在H5之前，我们要在网页上播放音频、视频，需要借助第三方插件。
这些插件里面最火的就是Flash了，使用它有几个问题：
- 首先要单独安装Flash，操作比较繁琐。
- 其次Flash是一个独立软件，而且是一个商业公司的软件，那我们不得不考虑它的安全性问题。
- 最后Flash只支持电脑，手机端你们就自求多福了。
随着时代的发展，这种方法显然跟不上潮流了。
所以到了H5时代，HTML原生就支持音频、视频等多媒体。
2. audio音频
可以使用audio元素来播放音频文件，写法：
html
<audio controls>
<source src="hello.ogg" type="audio/ogg">
<source src="hello.mp3" type="audio/mpeg">
您的浏览器不支持播放音频
</audio>controls表示显示播放控件，就是播放按钮啥的，效果如下：
上述代码，浏览器如果支持ogg音频文件，则会播放hello.ogg。
如果ogg不支持的话，就继续看是否支持mp3音频文件，支持则播放。
如果mp3也不支持，则会显示"您的浏览器不支持播放音频"。
建议尽量多放几种格式的音频文件，因为不同浏览器对音频文件的支持不同。
3. video视频
video用法跟audio基本一样：
html
<video controls>
<source src="hello.mp4" type="hello/mp4" />
<source src="hello.ogg" type="video/ogg" />
您的浏览器不支持播放视频
</video>浏览器也是先尝试播放hello.mp4，然后尝试播放hello.ogg，如果都不行则显示文字。
效果如下：
4. audio与video常用属性
autoplay属性如果存在，则打开网页会自动播放。
controls属性如果存在，则显示控制按钮，如播放键。
loop属性如果存在，则循环播放。
5. 小结
有了H5播放音视频成为了一种很简单的事情。