HTML5 - Audio & Video

HTML5 - 音频与视频

HTML5 的主要进展之一是引入了 <audio> 和 <video> 元素，提供了一种标准的、无需插件的方式，用于直接在网页中嵌入和控制多媒体内容。

这消除了之前对 Adobe Flash 或 Microsoft Silverlight 等第三方插件（它们现在已经过时）的依赖，从而实现了基本媒体播放。

嵌入视频 (`<video>`)

<video> 元素嵌入视频内容。最简单的情况下，你使用 src 属性提供视频源，并可选地包含 controls 属性来显示浏览器默认的播放控件（播放/暂停、音量、全屏等）。

<!DOCTYPE html>
<html>
<head>
    <title>Simple Video Example</title>
</head>
<body>
    <h1>My Awesome Video</h1>
    <video src="videos/myvideo.mp4" width="640" height="360" controls>
        <!-- Fallback content for older browsers -->
        Sorry, your browser doesn't support embedded videos.
        You can <a href="videos/myvideo.mp4">download the video</a> instead.
    </video>
</body>
</html>

使用 `<source>` 元素提供多种格式

不同浏览器历来支持不同的视频格式（编解码器和容器）。为了确保更广泛的兼容性，最佳实践是使用嵌套在 <video> 标签内的 <source> 元素提供多种视频格式。浏览器会使用它理解的第一个格式。

常见的网络视频格式包括：

MP4 (H.264 + AAC): 广泛支持，质量和压缩之间的良好平衡。通常是首选。
WebM (VP8/VP9 + Vorbis/Opus): 开放且免版税的格式，出色的质量，在 Chrome/Firefox/Edge 中得到良好支持。
AV1 (搭配 Opus/其他音频): 较新的、免版税的编解码器，提供卓越的压缩效率，正在获得支持。

<video width="640" height="360" controls poster="images/video-poster.jpg">
  <source src="videos/myvideo.webm" type="video/webm">
  <source src="videos/myvideo.mp4" type="video/mp4">
  <!-- Add more sources if needed (e.g., AV1) -->
  <!-- Fallback content -->
  Sorry, your browser doesn't support embedded videos.
</video>

<source> 中的 type 属性帮助浏览器快速确定它是否可以播放该格式，而无需先下载。

常见的 `<video>` 属性

属性 (Attribute)	描述 (Description)
`src`	视频文件的 URL（使用 `<source>` 的替代方案）。
`controls`	布尔属性。如果存在，则显示浏览器默认的播放控件。
`width`	视频播放器宽度，单位 CSS 像素。
`height`	视频播放器高度，单位 CSS 像素。
`autoplay`	布尔属性。尽快自动开始播放视频。注意：大多数现代浏览器限制有声自动播放，除非用户已与网站互动或视频已静音（设置了 `muted` 属性）。
`loop`	布尔属性。视频结束时从头开始重新播放。
`muted`	布尔属性。默认静音音频输出。
`poster`	视频加载前或下载时显示的图片 URL。
`preload`	向浏览器提示页面加载时应加载多少视频文件。值：`none`（不预加载）、`metadata`（仅加载元数据，如时长）、`auto`（浏览器决定，可能会加载整个视频）。如果存在 `autoplay` 则忽略。
`playsinline`	布尔属性。对 iOS 很重要；允许视频在元素的边界内播放，而不是强制全屏。

嵌入音频 (`<audio>`)

<audio> 元素的工作方式与 <video> 非常相似，但用于声音内容。

<audio controls>
  <source src="audio/mysound.opus" type="audio/opus">
  <source src="audio/mysound.ogg" type="audio/ogg; codecs=vorbis">
  <source src="audio/mysound.mp3" type="audio/mpeg">
  <!-- Fallback content -->
  Your browser does not support the audio element.
</audio>

常见的网络音频格式：

MP3: 得到非常广泛的支持，但存在专利限制。
Opus: 开放、免版税、高效的编解码器，对音乐和语音都很出色。通常封装在 .opus 或 .webm 容器中。
Vorbis: 开放、免版税、质量良好。通常在 .ogg 容器中。
AAC: 质量良好，常见（尤其与 MP4 视频一起使用时），但存在专利限制。
WAV: 未压缩，高质量，文件大小较大。不适合网络流媒体，但有时用于短音效。

常见的 `<audio>` 属性

大多数属性与 <video> 类似：src、controls、autoplay、loop、muted、preload。宽度和高度通常不适用。<source> 元素的使用方式相同，用于提供多种格式。

使用 JavaScript 控制媒体

HTMLMediaElement API（<audio> 和 <video> 都实现了该 API）提供了丰富的 JavaScript 方法、属性和事件，用于控制播放、检查状态和响应媒体事件。

主要方法和属性

play(): 开始或恢复播放。
pause(): 暂停播放。
load(): 重置媒体元素并重新加载媒体源。
currentTime: 获取或设置当前播放位置（单位：秒）。
duration: 只读。返回媒体总时长（单位：秒）。
volume: 获取或设置音量（0.0 到 1.0）。
muted: 获取或设置静音状态（布尔值）。
paused: 只读布尔值，指示播放是否已暂停。
ended: 只读布尔值，指示播放是否已完成。
seeking: 只读布尔值，指示是否正在进行寻找（快进/快退）操作。
networkState、readyState: 提供关于加载状态的信息。

主要事件

play、pause、ended、timeupdate、volumechange、seeking、seeked、canplay、canplaythrough、loadeddata、error、progress、waiting（缓冲）。

JavaScript 示例：自定义播放/暂停按钮

<!DOCTYPE html>
<html>
<head>
    <title>JS Media Control</title>
</head>
<body>
    <video id="myPlayer" width="640" height="360" src="videos/myvideo.mp4"></video>
    <div>
        <button id="playPauseBtn">播放</button>
    </div>

    <script>
        const player = document.getElementById('myPlayer');
        const playPauseBtn = document.getElementById('playPauseBtn');

        function togglePlayPause() {
            if (player.paused || player.ended) {
                player.play();
            } else {
                player.pause();
            }
        }

        playPauseBtn.addEventListener('click', togglePlayPause);

        // 根据播放器状态更新按钮文本
        player.addEventListener('play', () => { playPauseBtn.textContent = '暂停'; });
        player.addEventListener('pause', () => { playPauseBtn.textContent = '播放'; });
        player.addEventListener('ended', () => { playPauseBtn.textContent = '播放'; });

    </script>
</body>
</html>

可访问性：轨道 (`<track>`)

嵌套在 <audio> 或 <video> 内的 <track> 元素用于指定定时文本轨道，例如字幕（subtitles）、隐藏式字幕（captions）、描述（descriptions）、章节（chapters）或元数据（metadata）。这对于可访问性至关重要。

<video controls width="640" height="360">
  <source src="videos/myvideo.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles/myvideo-en.vtt" srclang="en" label="英语" default>
  <track kind="captions" src="captions/myvideo-es.vtt" srclang="es" label="西班牙语">
  <!-- VTT (Web Video Text Tracks) 是一种常见格式 -->
  Sorry, your browser doesn't support embedded videos.
</video>

服务器配置 (MIME 类型)

确保你的 Web 服务器使用正确的 MIME 类型提供媒体文件，以便浏览器能够正确识别它们。常见类型包括：

MP4 Video: video/mp4
WebM Video: video/webm
MP3 Audio: audio/mpeg
Ogg Audio: audio/ogg
Opus Audio: audio/opus
WAV Audio: audio/wav
VTT Tracks: text/vtt

请查阅你的 Web 服务器文档，了解如何配置 MIME 类型的说明（例如，Apache 的 .htaccess 文件中，或 Nginx 的 mime.types 文件中）。

HTML5 - Audio & Video

HTML5 - 音频与视频

嵌入视频 (<video>)

使用 <source> 元素提供多种格式

常见的 <video> 属性

嵌入音频 (<audio>)

常见的 <audio> 属性