一文总结 HTML5 多媒体标签

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

HTML5 引入了许多新的多媒体标签，使网页能够更丰富地集成音频、视频和其他多媒体内容

以下是 HTML5 中一些常用的多媒体标签及其用法：

1.<audio>：用于嵌入音频内容。

src：指定音频文件的 URL。

controls：添加播放控件，如播放按钮、音量控制等。

autoplay：指定音频自动播放。

loop：指定音频循环播放。

示例：

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

2.<video>：用于嵌入视频内容。

src：指定视频文件的 URL。

controls：添加播放控件，如播放按钮、进度条等。

autoplay：指定视频自动播放。

loop：指定视频循环播放。

width 和 height：设置视频的宽度和高度。

示例：

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

3.<source>：用于在 <audio> 和 <video> 标签中指定多个媒体源，以便在不同浏览器中选择适合的格式。

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

4.<iframe>：虽然通常用于嵌入其他网页，但也可用于嵌入包含多媒体内容的页面。

<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

5.<canvas>：用于绘制图形、动画等多媒体内容，通过 JavaScript API 控制。

  <canvas id="myCanvas" width="400" height="200"></canvas>

<svg>：用于创建矢量图形，适合制作可伸缩的图形.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

以上是 HTML5 中多媒体标签的内容，在很多组件库里对原生的标签进行了封装，也可以直接拿过来用。上面提到的 iframe 标签在之前的文章有详细介绍。感兴趣的朋友可以看下 HTML 合集中的内容。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。