8.1 <source> 元素
<source> 和 <track> 元素在HTML5中很重要，它们提供了不同的多媒体格式支持并提高了内容的可访问性。让我们详细看看它们。
<source> 元素用于 <audio>、<video> 和 <picture> 元素中，用于指定不同来源的多媒体内容。这样浏览器可以选择最合适的格式进行播放，从而保证跨浏览器兼容性和支持不同设备。
语法
<source src="URL" type="MIME-type">
属性
src: 指定多媒体文件的路径type: 指定文件类型及其MIME类型。帮助浏览器判断是否支持该格式
使用示例：
示例 1: 在 <video> 元素中
在这个例子中，浏览器会尝试播放第一个支持的格式。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
你的浏览器不支持视频播放。
</video>
示例 2: 在 <audio> 元素中
HTML
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
你的浏览器不支持音频播放。
</audio>
示例 3: 在 <picture> 元素中
HTML
<picture>
<source srcset="image-320w.jpg" media="(max-width: 320px)">
<source srcset="image-640w.jpg" media="(max-width: 640px)">
<source srcset="image-1280w.jpg" media="(max-width: 1280px)">
<img src="image-1280w.jpg" alt="图像示例">
<picture>
使用 <source> 的好处
- 跨浏览器兼容性: 允许指定多种格式，确保在不同浏览器中播放
- 设备优化: 可以为不同设备和条件指定不同文件
8.2 <track> 元素
<track> 元素用于为多媒体内容（如字幕、听障者或听力受损者字幕、描述、章节和元数据）添加文本轨道。它位于 <audio> 或 <video> 元素中。
语法
<track src="URL" kind="type" srclang="language" label="label">
属性
src: 指定文本轨道文件的路径。-
kind: 确定文本轨道的类型。可能的值：subtitles: 翻译对话的字幕captions: 听障者或听力受损者用的字幕，包括声音描述descriptions: 为视障者提供音频描述chapters: 用于多媒体内容导航的章节metadata: 可供 JavaScript 使用的元数据
srclang: 确定文本轨道的语言（例如，en表示英语，es表示西班牙语）。label: 描述性文本轨道名称，显示在轨道选择菜单中。default: 指定该轨道应为默认启用
使用示例：
示例 1: 视频字幕
在这个例子中，视频有两条字幕轨道：英文和西班牙文。用户可以从菜单中选择所需的轨道。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
你的浏览器不支持视频播放。
</video>
示例 2: 听障者或听力受损者字幕
这个配置为听障者或听力受损者在英文中添加了字幕轨道。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
你的浏览器不支持视频播放。
</video>
使用 <track> 的好处
- 提高可访问性: 字幕和描述让内容对听障、听力受损和视障用户更易于访问
- 支持多语言: 可以添加多种语言的字幕
- 附加信息: 章节和元数据帮助组织和结构化多媒体内容
8.3 文本轨道的文件格式
文本轨道通常保存为 WebVTT (Web Video Text Tracks) 格式。这种格式被大多数现代浏览器支持，易于被人和机器读取。
WebVTT 文件示例 (subtitles_en.vtt)
TEXT
WEBVTT
1
00:00:00.000 --> 00:00:05.000
欢迎观看我们的视频演示。
2
00:00:05.000 --> 00:00:10.000
我们希望你觉得这有帮助且有趣。
综合使用 <source> 和 <track> 元素的示例
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带多来源和文本轨道的视频</title>
</head>
<body>
<h1>带多来源和文本轨道的视频示例</h1>
<video controls width="600" poster="posterimage.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
<track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
Your browser does not support the video element.
</video>
</body>
</html>
GO TO FULL VERSION