前端必知必会-html video和audio

---

HTML <video>

HTML <video> 元素用于在网页上显示视频。

HTML <video> 元素

要在 HTML 中显示视频，请使用 <video> 元素：

示例

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>

工作原理

controls 属性添加视频控件，如播放、暂停和音量。

最好始终包含 width 和 height 属性。如果未设置 height 和 width，则加载视频时页面可能会闪烁。

<source> 元素允许您指定浏览器可以选择的备用视频文件。浏览器将使用第一个识别的格式。

<video> 和 </video> 标签之间的文本只会在不支持 <video> 元素的浏览器中显示。

HTML <video> 自动播放

要自动开始播放视频，请使用 autoplay 属性：

示例

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

注意：Chromium 浏览器在大多数情况下不允许自动播放。但是，始终允许静音自动播放。

在自动播放后添加静音，让您的视频自动开始播放（但静音）：

示例

<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>

HTML audio

HTML <audio> 元素用于在网页上播放音频文件。

HTML <audio> 元素
要在 HTML 中播放音频文件，请使用 <audio> 元素：

示例

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

HTML 音频 - 工作原理

controls 属性添加音频控件，如播放、暂停和音量。

<source> 元素允许您指定浏览器可以选择的备选音频文件。浏览器将使用第一个可识别的格式。

<audio> 和 </audio> 标签之间的文本将仅在不支持 <audio> 元素的浏览器中显示。

HTML <audio> 自动播放

要自动启动音频文件，请使用 autoplay 属性：

示例

<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

注意：Chromium 浏览器在大多数情况下不允许自动播放。但是，始终允许静音自动播放。

在 autoplay 后添加 muted 可让您的音频文件自动开始播放（但静音）：

示例

<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

HTML 音频格式

支持的音频格式有三种：MP3、WAV 和 OGG。

HTML 音频 - 媒体类型

文件格式	媒体类型
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

HTML 音频 - 方法、属性和事件

HTML DOM 为 <audio> 元素定义方法、属性和事件。

这允许您加载、播放和暂停音频，以及设置时长和音量。

---

总结

本文介绍了html video和audio的使用，如有问题欢迎私信和评论