HTML 音视频

HTML5 带来了原生的 <audio> 和 <video> 标签，不再需要 Flash 插件就能播放媒体内容。

<video> — 视频

html 
<video src="/media/movie.mp4" controls width="640" height="360">
  您的浏览器不支持 video 标签。
</video>

常用属性

属性说明
src视频文件路径
controls显示浏览器默认播放控件
autoplay自动播放（通常需要配合 muted）
muted静音
loop循环播放
poster视频加载前显示的预览图
preload预加载策略：none / metadata / auto
playsinline移动端在页面内播放，不自动全屏

大多数浏览器会阻止带声音的自动播放。autoplay + muted 是被允许的组合，常用于背景视频。

多源（兼容不同浏览器）

不同浏览器支持的视频格式不同，使用 <source> 提供多种格式：

html 
<video controls poster="/images/preview.jpg">
  <source src="/media/movie.webm" type="video/webm">
  <source src="/media/movie.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频。
</video>

<audio> — 音频

html 
<audio src="/media/music.mp3" controls>
  您的浏览器不支持 audio 标签。
</audio>

属性与 <video> 类似：

html 
<audio controls autoplay muted loop>
  <source src="/media/music.ogg" type="audio/ogg">
  <source src="/media/music.mp3" type="audio/mpeg">
  您的浏览器不支持 HTML5 音频。
</audio>

媒体格式支持

格式类型说明
MP4 (H.264)视频兼容性最好，几乎所有浏览器支持
WebM (VP8/VP9)视频开源，Chrome/Firefox/Edge 支持
MP3音频兼容性最好的音频格式
Ogg Vorbis音频开源替代方案
WAV音频无损，文件大

<track> — 字幕与章节

<track> 为视频添加文本轨道——字幕、章节标记等：

html 
<video controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <track src="/media/subtitles-zh.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="/media/subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="/media/chapters.vtt" kind="chapters" srclang="zh" label="章节">
</video>

kind 可选值：

值说明
subtitles对话翻译字幕
captions完整字幕（含音效描述，无障碍）
descriptions画面描述（屏幕阅读器使用）
chapters章节标记
metadata脚本使用的元数据

WebVTT 格式示例

text 
WEBVTT

1
00:00:00.000 --> 00:00:03.000
欢迎观看本教程

2
00:00:03.500 --> 00:00:07.000
今天我们来学习 HTML 的基础知识

3
00:00:07.500 --> 00:00:12.000
首先，了解 HTML 文档的基本结构

4
00:00:12.500 --> 00:00:18.000
每个 HTML 页面都以 DOCTYPE 声明开始

媒体 API

通过 JavaScript 控制播放：

html 
<video id="demoVideo" controls width="400" src="/media/movie.mp4"></video>
<button onclick="document.getElementById('demoVideo').play()">播放</button>
<button onclick="document.getElementById('demoVideo').pause()">暂停</button>
<button onclick="document.getElementById('demoVideo').currentTime = 0">重置</button>
<div id="info"></div>
<script>
  const video = document.getElementById('demoVideo');
  const info = document.getElementById('info');
  video.addEventListener('loadedmetadata', () => {
    info.textContent = '时长: ' + video.duration + ' 秒';
  });
  video.addEventListener('ended', () => {
    info.textContent = '播放完毕';
  });
</script>