第08篇：音频与视频

第08篇音频与视频从静态图片到动态音视频多媒体让网页体验更加丰富。本篇学习如何在网页中嵌入音频和视频内容并处理兼容性、可访问性等问题。学习目标掌握video和audio标签的基本用法和常用属性理解多格式回退机制解决浏览器兼容问题学会使用track添加字幕提升可访问性了解视频封面、自动播放策略和常见陷阱能够独立嵌入视频、音频和字幕到网页中核心知识点一、视频标签videovideo标签用于在网页中嵌入视频内容。videosrcmovie.mp4controlswidth640height360postercover.jpg您的浏览器不支持视频播放。/videovideo核心属性属性作用示例值src视频文件路径movie.mp4controls显示播放控件播放/暂停/进度条/音量无值属性autoplay自动播放无值属性muted默认静音无值属性loop循环播放无值属性poster视频封面图加载前显示cover.jpgpreload预加载策略auto、metadata、nonewidth/height播放器尺寸640/360各属性详解controls!-- 显示浏览器原生的播放控件 --videosrcmovie.mp4controls/video如果不加controls视频将不会显示任何播放按钮用户无法交互除非用 JavaScript 控制。autoplay与muted重要!-- ❌ 大多数浏览器会阻止自动播放有声视频 --videosrcmovie.mp4autoplay/video!-- ✅ 静音的视频可以自动播放 --videosrcmovie.mp4autoplaymuted/video浏览器策略为了防止打扰用户Chrome、Safari、Firefox 等主流浏览器都禁止自动播放有声视频。只有用户与页面交互后或有声自动播放被用户明确允许的网站才能突破此限制。postervideosrcmovie.mp4controlspostervideo-cover.jpg视频封面会在视频加载前显示/videoposter指定的图片会在视频加载完成前显示相当于视频的封面。preload值行为使用场景auto尽可能预加载整个视频视频是页面主要内容metadata只加载元数据时长、尺寸等默认推荐none不预加载视频不太可能被播放节省流量二、多格式回退不同浏览器支持的视频格式不同必须提供多个格式源。常见视频格式兼容性格式ChromeFirefoxSafariEdgeIEMP4 (H.264)✅✅✅✅✅WebM✅✅❌✅❌Ogg (Theora)✅✅❌✅❌使用source实现格式回退videocontrolswidth640height360postercover.jpg!-- 优先尝试 WebM体积更小 --sourcesrcmovie.webmtypevideo/webm!-- 回退到 MP4兼容性最好 --sourcesrcmovie.mp4typevideo/mp4!-- 最后的文本提示当浏览器不支持 video 标签时显示 --p您的浏览器不支持视频播放。您可以ahrefmovie.mp4下载视频/a观看。/p/video浏览器的选择逻辑1. 浏览器从上到下检查 source 2. 遇到支持的格式就加载忽略后面的 3. 所有 source 都不支持 → 显示 video 标签内的文本内容type属性的完整写法!-- 更精确的 type 可以帮浏览器更快决策 --sourcesrcmovie.mp4typevideo/mp4; codecsavc1.42E01E,mp4a.40.2 实际开发中通常写typevideo/mp4就足够了。只有在遇到兼容性问题时才需要精确到 codec。三、音频标签audioaudio的用法和video几乎一样只是没有画面。audiocontrolssourcesrcmusic.mp3typeaudio/mpegsourcesrcmusic.oggtypeaudio/oggp您的浏览器不支持音频播放。/p/audio音频格式兼容性格式ChromeFirefoxSafariEdgeMP3✅✅✅✅Ogg Vorbis✅✅❌✅WAV✅✅✅✅AAC✅✅✅✅MP3 的兼容性已经足够好大多数情况下提供 MP3 即可。audio专属属性audio和video共享大部分属性但audio没有poster、width、height因为没有视觉画面。四、字幕与轨道tracktrack元素为视频添加字幕、章节标题或描述性文本大幅提升可访问性。videocontrolswidth640height360sourcesrcmovie.mp4typevideo/mp4!-- 中文字幕 --trackkindsubtitlessrcsubtitles-zh.vttsrclangzhlabel中文default!-- 英文字幕 --trackkindsubtitlessrcsubtitles-en.vttsrclangenlabelEnglish!-- 章节导航 --trackkindchapterssrcchapters.vttsrclangzhlabel章节/videotrack属性属性说明示例kind轨道类型subtitles/captions/descriptions/chapters/metadatasrc字幕文件路径.vtt格式subtitles.vttsrclang字幕语言zh、enlabel显示给用户的选择标签中文、Englishdefault默认启用此轨道无值属性字幕文件格式WebVTT.vttWEBVTT 00:00:01.000 -- 00:00:05.000 欢迎来到 HTML 音视频教程 00:00:05.500 -- 00:00:10.000 今天我们将学习如何在网页中嵌入视频 00:00:10.500 -- 00:00:15.000 以及如何处理多格式兼容性问题kind的五种类型类型用途受众subtitles翻译字幕听不懂视频语言的用户captions完整字幕含音效描述听障用户descriptions画面描述音频读出视障用户chapters章节导航所有用户metadata脚本/数据不显示JavaScript 使用subtitles vs captionssubtitles只翻译对话captions还包含音效描述如[敲门声]“、[音乐响起]”。在美国法律规定视频必须有 captions。五、嵌入外部视频平台除了托管自己的视频更常见的是嵌入 YouTube、Bilibili 等平台的视频。嵌入 Bilibili 视频!-- Bilibili 分享 → 嵌入代码 --iframesrc//player.bilibili.com/player.html?bvidBV1xx411c7mDwidth800height600frameborder0allowfullscreen/iframe嵌入 YouTube 视频iframesrchttps://www.youtube.com/embed/VIDEO_IDwidth560height315frameborder0allowaccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-pictureallowfullscreen/iframeiframe 嵌入的安全建议!-- 使用 sandbox 限制 iframe 权限 --iframesrchttps://www.youtube.com/embed/VIDEO_IDsandboxallow-scripts allow-same-origin allow-presentationallowfullscreen/iframe⚠️ 嵌入第三方视频时要注意 iframe 的sandbox属性和referrerpolicy限制不必要的权限。详见第18篇《嵌入外部内容》。六、视频最佳实践视频文件大小优化策略说明压缩视频使用 HandBrake、FFmpeg 等工具压缩选择合适的分辨率不需要在手机上加载 4K 视频使用 CDN视频文件放在 CDN 上加速全球访问流媒体协议大视频使用 HLS 或 DASH 协议分段加载移动端注意事项!-- 移动端视频默认全屏播放iOS Safari --videosrcmovie.mp4controlsplaysinlineplaysinline 允许视频在页面内播放而不是强制全屏/video属性作用playsinlineiOS Safari 中在页面内播放不自动全屏webkit-playsinlineiOS 旧版本的兼容性写法动手练习练习 1完整的视频播放器创建一个包含以下特性的视频播放器提供 MP4 和 WebM 两种格式设置视频封面poster显示播放控件添加中文字幕使用 WebVTT 格式视频加载失败时显示友好的降级提示练习 2音频播放器页面创建一个音乐播放列表页面至少 3 首音频使用audio标签每首音频显示标题和时长音频默认不自动播放考虑移动端自动播放限制添加提示说明练习 3WebVTT 字幕制作为一个 30 秒的视频片段编写.vtt字幕文件文件开头有WEBVTT标记至少包含 5 条字幕时间格式正确HH:MM:SS.mmm在 video 标签中用track引用并测试常见误区 ⚠️误区真相“autoplay可以让视频自动播放”现代浏览器禁止有声自动播放必须配合muted“只提供 MP4 就够了”MP4 兼容性最好但 WebM 体积更小。建议同时提供两者“video里面可以不写任何内容”建议写降级提示不支持 video 标签的浏览器会显示这段文字“字幕文件用.srt格式”HTML 标准使用WebVTT.vtt格式不是 SRT“preloadauto总是好的”会消耗流量。如果用户大概率不播放用none“视频越大越清晰越好”要平衡画质和加载速度。考虑提供多分辨率“iOS 上视频会自动全屏”iOS 10 支持playsinline属性在页面内播放“音频和视频标签完全一样”很相似但 audio 没有poster、width、height速查卡片 video标签完整模板videocontrolswidth640height360postercover.jpgpreloadmetadataplaysinlinesourcesrcmovie.webmtypevideo/webmsourcesrcmovie.mp4typevideo/mp4trackkindsubtitlessrcsubtitles-zh.vttsrclangzhlabel中文defaulttrackkindsubtitlessrcsubtitles-en.vttsrclangenlabelEnglishp您的浏览器不支持视频播放。ahrefmovie.mp4下载视频/a/p/videoaudio标签模板audiocontrolspreloadmetadatasourcesrcmusic.mp3typeaudio/mpegsourcesrcmusic.oggtypeaudio/oggp您的浏览器不支持音频播放。/p/audio视频格式回退优先级WebM体积小→ MP4兼容好→ 文本提示WebVTT 基本格式WEBVTT 00:00:01.000 -- 00:00:05.000 第一行字幕 00:00:05.500 -- 00:00:10.000 第二行字幕trackkind 类型kind用途subtitles翻译字幕captions完整字幕含音效descriptions画面描述chapters章节导航metadata脚本数据自动播放策略想自动播放视频 ├── 静音 → ✅ autoplay muted └── 有声 → ❌ 浏览器会阻止需用户交互后视频/音频 checklist提供至少两种格式MP4 WebM / MP3 Ogg添加controls让用户可以操作首屏视频不需要自动播放或autoplay muted需要字幕时提供 WebVTT 文件视频有poster封面图移动端添加playsinline扩展阅读MDN: 元素MDN: 元素MDN: 元素MDN: WebVTTGoogle Web.dev: 视频优化英文下一步多媒体让页面生动起来了。进入 第09篇列表三种形态学习用列表组织和展示信息。