全心致力于ICT实战型人才培养和输送
扫码试听
<html><head><meta charset="utf-8"><title>在HTML5中嵌入视频</title></head><body><!-- src属性是引用资源路径 controls：布尔值，也可以直接添加。会显示音视频的进度条。--><video src="video/runtime.mp4" controls>浏览器不支持video标签</video></body></html>
<html><head><meta charset="utf-8"><title>在HTML5中嵌入音频</title></head><body><!-- src属性是引用资源路径 controls：布尔值，也可以直接添加。会显示音视频的进度条。--><audio src="music/runtime.mp3" controls="controls">浏览器不支持audio标签</audio></body></html>
HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。
src：引用资源的路径
autoplay：布尔值，设置为true后音视频会自动播放（新版浏览器大多禁止自动播放，实测没用）。
controls：布尔值，也可以直接添加。会显示音视频的进度条。
loop：布尔值，也可直接添加。设置为true后会循环播放。
preload：指定是否预加载音视频。有三个值：
1. auto：预加载音视频。
2. metadata：只预加载音视频元数据。如媒体字节数、第一帧、播放列表、持续时间等。
3. none：不执行预加载。
（指定了autoplay属性后preload会被自动忽略）poster：只对<video>元素有效，该属性指定一张图片的URL地址。在视频下载完成、开始播放之前，该元素将会显示该属性指定的图片。视频不可用时同样显示它。
width、height：只对<video>元素有效，指定视频播放器的宽高。
|
addTextTrack() |
向音频/视频添加新的文本轨道。 |
|
canPlayType() |
检测浏览器是否能播放指定的音频/视频类型。 |
|
load() |
重新加载音频/视频元素。 |
|
play() |
开始播放音频/视频。 |
|
pause() |
暂停当前播放的音频/视频。 |
|
abort |
当音频/视频的加载已放弃时触发。 |
|
canplay |
当浏览器可以开始播放音频/视频时触发。 |
|
canplaythrough |
当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
|
durationchange |
当音频/视频的时长已更改时触发。 |
|
emptied |
当目前的播放列表为空时触发。 |
|
ended |
当目前的播放列表已结束时触发。 |
|
error |
当在音频/视频加载期间发生错误时触发。 |
|
loadeddata |
当浏览器已加载音频/视频的当前帧时触发。 |
|
loadedmetadata |
当浏览器已加载音频/视频的元数据时触发。 |
|
loadstart |
当浏览器开始查找音频/视频时触发。 |
|
pause |
当音频/视频已暂停时触发。 |
|
play |
当音频/视频已开始或不再暂停时触发。 |
|
playing |
当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
|
progress |
当浏览器正在下载音频/视频时触发。 |
|
ratechange |
当音频/视频的播放速度已更改时触发。 |
|
seeked |
当用户已移动/跳跃到音频/视频中的新位置时触发。 |
|
seeking |
当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
|
stalled |
当浏览器尝试获取媒体数据，但数据不可用时触发。 |
|
suspend |
当浏览器刻意不获取媒体数据时触发。 |
|
timeupdate |
当目前的播放位置已更改时触发。 |
|
volumechange |
当音量已更改时触发。 |
|
waiting |
当视频由于需要缓冲下一帧而停止时触发。 |
以上就是这期文章讲到的常用Web 前端开发工具，熟练的使用这些工具是学好 Web 前端的基础条件，各位同学可以自行尝试安装和使用。我们下期再见！
