HTML 媒体元素概述

HTML 提供了多种元素用于嵌入和控制多媒体内容，包括音频、视频、图像、画布等。以下是常用的 HTML 媒体元素及其用法：

音频 (<audio>)

<audio> 元素用于嵌入音频内容，支持 MP3、WAV、OGG 等格式。

示例代码：

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

• controls 属性显示播放控件（如播放/暂停按钮）。
• <source> 指定多个音频源以提高兼容性。

视频 (<video>)

<video> 元素用于嵌入视频内容，支持 MP4、WebM、OGG 等格式。

示例代码：

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

• width 和 height 设置视频尺寸。
• autoplay 属性可自动播放（需注意浏览器限制）。

图像 (<img>)

<img> 用于嵌入静态图像，支持 JPEG、PNG、GIF 等格式。

示例代码：

<img src="image.jpg" alt="描述文字" width="500" height="300">

• alt 提供替代文本，对无障碍访问和 SEO 友好。

画布 (<canvas>)

<canvas> 提供动态绘图能力，需结合 JavaScript 使用。

示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 150, 80);
</script>

嵌入外部内容 (<iframe>)

<iframe> 用于嵌入其他网页或媒体（如 YouTube 视频）。

示例代码：

<iframe src="https://www.youtube.com/embed/example" 
        width="560" height="315" 
        frameborder="0" allowfullscreen>
</iframe>

响应式媒体设计

通过 CSS 实现媒体内容的响应式适配：

video, img {
  max-width: 100%;
  height: auto;
}

媒体格式兼容性建议

1. 音频：提供 MP3（广泛兼容）和 OGG（开源格式）。
2. 视频：优先使用 MP4（H.264 编码）和 WebM（开源格式）。
3. 图像：使用 WebP 格式可优化加载速度（需兼容性检查）。