【Web前端HTML篇】HTML音频/视频标签

发布时间:2022-11-05 栏目：公司动态浏览：次

小伙伴们大家好呀，又到了每周技术分享的栏目了，上周小天给大家讲了 HTML 表单标签，今天这篇文章给大家带来的是HTML 音频/视频标签。

音/视频元素

视频标签 video

<!doctype html><html><head><meta charset="utf-8"><title>在HTML5中嵌入视频</title></head><body><!-- src属性是引用资源路径 controls：布尔值，也可以直接添加。会显示音视频的进度条。--><video src="video/runtime.mp4" controls>浏览器不支持video标签</video></body></html>

音频标签audio

<!doctype 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	当视频由于需要缓冲下一帧而停止时触发。