编辑“︁HTML多媒体格式”︁

= HTML多媒体格式 =

'''HTML多媒体格式'''是指通过HTML标签在网页中嵌入音频、视频、图像等多媒体内容的文件格式标准。现代网页开发支持多种多媒体格式，开发者可以根据需求选择最适合的格式以确保兼容性和性能优化。

== 概述 ==
HTML5引入了原生支持多媒体的标签（如<code><nowiki><audio></nowiki></code>和<code><nowiki><video></nowiki></code>），无需依赖第三方插件（如Flash）。浏览器对不同格式的支持程度不同，因此需了解常见格式及其适用场景。

=== 核心概念 ===
* '''容器格式'''：存储编码后的多媒体数据（如MP4、WebM）。
* '''编码格式'''：压缩数据的算法（如H.264、VP9）。
* '''MIME类型'''：标识格式的互联网标准（如<code>video/mp4</code>）。

== 常见多媒体格式 ==

=== 图像格式 ===
{| class="wikitable"
|+ 主流图像格式对比
! 格式 !! 特点 !! 适用场景 !! MIME类型
|-
| PNG || 无损压缩，支持透明度 || 图标、透明背景图 || <code>image/png</code>
|-
| JPEG || 有损压缩，文件小 || 照片、复杂图像 || <code>image/jpeg</code>
|-
| GIF || 支持动画，256色限制 || 简单动画、表情包 || <code>image/gif</code>
|-
| WebP || 现代格式，压缩率高 || 替代JPEG/PNG || <code>image/webp</code>
|}

=== 音频格式 ===
{| class="wikitable"
|+ 主流音频格式对比
! 格式 !! 特点 !! 浏览器支持 !! MIME类型
|-
| MP3 || 有损压缩，兼容性好 || 所有主流浏览器 || <code>audio/mpeg</code>
|-
| AAC || 高效压缩，苹果生态首选 || 所有主流浏览器 || <code>audio/aac</code>
|-
| Ogg Vorbis || 开源，无专利限制 || Firefox、Chrome || <code>audio/ogg</code>
|-
| WAV || 无损，文件大 || 所有主流浏览器 || <code>audio/wav</code>
|}

=== 视频格式 ===
{| class="wikitable"
|+ 主流视频格式对比
! 格式 !! 编码 !! 浏览器支持 !! MIME类型
|-
| MP4 || H.264 || 所有主流浏览器 || <code>video/mp4</code>
|-
| WebM || VP9 || Firefox、Chrome || <code>video/webm</code>
|-
| Ogg Theora || Theora || Firefox、Chrome || <code>video/ogg</code>
|}

== 代码示例 ==

=== 图像嵌入 ===
<syntaxhighlight lang="html">
<img src="example.webp" alt="示例图片" width="300" height="200">
</syntaxhighlight>
'''输出效果'''：显示宽度300px、高度200px的WebP格式图片，若加载失败则显示替代文本。

=== 音频播放 ===
<syntaxhighlight lang="html">
<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>
</syntaxhighlight>
'''功能说明'''：提供MP3和Ogg双格式后备，确保跨浏览器兼容。

=== 视频播放 ===
<syntaxhighlight lang="html">
<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持HTML5视频。
</video>
</syntaxhighlight>
'''功能说明'''：优先加载MP4，若不支持则尝试WebM格式。

== 兼容性处理 ==
使用<code><nowiki><picture></nowiki></code>元素实现响应式图像：
<syntaxhighlight lang="html">
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图像示例">
</picture>
</syntaxhighlight>

== 实际应用案例 ==
'''场景'''：新闻网站需在文章中嵌入视频报道，同时支持移动端和桌面端。
'''解决方案'''：
<syntaxhighlight lang="html">
<video controls poster="preview.jpg">
  <source src="news.mp4" type="video/mp4">
  <source src="news.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
</video>
</syntaxhighlight>
'''优化点'''：
* 提供MP4（兼容性）和WebM（高性能）双源
* 添加海报帧（poster）提升加载体验
* 包含字幕文件（WebVTT格式）增强可访问性

== 技术深度 ==
=== 编解码器原理 ===
视频文件通常包含：
<mermaid>
graph LR
  A[容器格式] --> B[视频轨道]
  A --> C[音频轨道]
  B --> D[编码器: H.264/VP9]
  C --> E[编码器: AAC/Vorbis]
</mermaid>

数学上，视频压缩基于离散余弦变换（DCT）：
<math>
F(u,v) = \frac{1}{4}C(u)C(v)\sum_{x=0}^{7}\sum_{y=0}^{7}f(x,y)\cos\left[\frac{(2x+1)u\pi}{16}\right]\cos\left[\frac{(2y+1)v\pi}{16}\right]
</math>

== 最佳实践 ==
1. '''优先使用WebP/AVIF'''：现代格式节省带宽30%-50%
2. '''视频预加载策略'''：对首屏视频添加<code>preload="metadata"</code>
3. '''懒加载非关键资源'''：<code><nowiki><img loading="lazy"></nowiki></code>

== 参见 ==
* [[HTML5音频视频API]]
* [[响应式图像设计]]
* [[媒体查询]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML图像与多媒体]]