1. 背景
在H5之前,我们要在网页上播放音频、视频,需要借助第三方插件。
这些插件里面最火的就是Flash了,使用它有几个问题:
- 首先要单独安装Flash,操作比较繁琐。
- 其次Flash是一个独立软件,而且是一个商业公司的软件,那我们不得不考虑它的安全性问题。
- 最后Flash只支持电脑,手机端你们就自求多福了。
随着时代的发展,这种方法显然跟不上潮流了。
2. 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音频文件,支持则播放。
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属性如果存在,则循环播放。