Author: 刘老师(Aaron Lau)
武汉长乐教育，武汉PHP培训课程，版权所有，转载请注明！
HTML5对音频和视频的支持
在过去，HMML中播放音频和视频的主要方法就是通过Flash插件来实现。
这种作坊有相当多得缺陷，Flash本身的问题也是一大堆。
现在有了HTML5原生对音频和视频的支持， 想在您的页面中播放音频和视频变得非常轻松愉快。
本课摘要
- 在页面中插入
音频文件
- 在页面中插入
视频文件
audio和video标签的属性audio和video对象的方法- 默认的controls不好看, 能设置样式吗?
1. 在页面中插入音频文件
<audio src="song.mp3" controls></audio>
<audio controls autoplay>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
你的浏览器不支持播放音频
</audio>
2. 在页面中插入视频文件
<video src="movie.ogg" controls="controls"></video>
<video src="movie.ogg" width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持播放视频
</video>
3. audio和video标签的属性
| 属性 |
值 |
| autoplay |
页面加载时，自动播放 |
| controls |
是否出现播放、暂停等控件 |
| loop |
是否重复播放 |
| meted |
默认被静音 |
| preload |
页面加载就开始加载音频,并预备播放, 如果出现autoplay,则忽略该属性 |
4. audio和video对象的方法
参见audio对象和[video对象](
http://www.w3school.com.cn/jsref/dom_obj_video.asp)
var x = document.getElementById("myAudio");
| 函数 |
动作 |
| load() |
加载动态生成的音频 |
| play() |
播放 |
| pause() |
暂停 |
5. 默认的controls不好看, 能设置样式吗?
答案是不可以! 但是你可以去掉controls, 然后自己写div, 在绑定事件, 控制播放和暂停