<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 前端的基础条件,各位同学可以自行尝试安装和使用。我们下期再见!