Media 在 HTML 中通常指的是媒体元素，如图像、音频和视频，这些元素可以丰富网页内容，提供更多样化的用户体验，HTML5 引入了多种媒体元素，如 <audio>、<video> 和 <source>，它们允许开发者轻松地在网页上嵌入和管理多媒体内容，本文将详细介绍这些媒体元素及其使用方法。
我们来了解 <audio> 元素，这个元素可以让用户在网页上播放音频文件，要使用 <audio> 元素，只需在 HTML 中插入以下代码：
<audio controls> <source src="example.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
这段代码创建了一个带有控件（如播放、暂停和音量控制按钮）的音频播放器。<source> 元素用于指定音频文件的路径（example.mp3）和类型（如 audio/mpeg），如果浏览器不支持 <audio> 元素，将显示 "Your browser does not support the audio element." 这段文本。
接下来，我们探讨 <video> 元素，这个元素与 <audio> 类似，但它用于嵌入和播放视频文件，以下是一个简单的 <video> 元素示例：
<video width="320" height="240" controls> <source src="example.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
这段代码创建了一个带有控件的视频播放器，并设置了播放器的宽度和高度，同样，<source> 元素用于指定视频文件的路径和类型，如果浏览器不支持 <video> 元素，将显示相应的提示信息。
除了 <audio> 和 <video> 元素，HTML5 还引入了一个名为 <source> 的元素，用于为这些媒体元素提供多个媒体文件，这使得开发者可以根据用户的设备和网络状况为用户提供最佳的视频或音频体验。
<video width="320" height="240" controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> Your browser does not support the video tag. </video>
在这个例子中，我们提供了两个视频文件：一个 MP4 格式和一个 WebM 格式，浏览器将根据其支持的格式自动选择一个合适的文件进行播放。
除了基本的媒体元素，HTML5 还提供了一些 API 和属性，用于更高级的媒体控制和交互，开发者可以使用 JavaScript 监听媒体元素的事件，如播放、暂停和加载完成等，还可以使用 CSS 控制媒体元素的样式，如调整播放器的大小、颜色和字体等。
HTML 中的 media 元素为用户提供了丰富的多媒体体验，使得网页内容更加生动和有趣，通过使用 <audio>、<video> 和 <source> 等元素，开发者可以轻松地在网页上嵌入和管理音频和视频内容，HTML5 提供的 API 和属性使得媒体元素具有更高的可定制性和交互性。