|
标签 |
描述 |
|
<source> |
用于指定多个媒体资源 |
|
<track> |
设定加载的字幕文件 |
外部字幕<track>
- 被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕
|
属性 |
描述 |
||||||||||||
|
src |
track 的地址。必须是合法的 URL。该属性必须定义 |
||||||||||||
|
default |
该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。每个媒体元素里面只有一个 track 元素可以有这个属性。 |
||||||||||||
|
kind |
定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 subtitles。下面是允许的关键字：
|
||||||||||||
|
label |
当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的 |
||||||||||||
|
srclang |
track 文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 kind 属性被设为 subtitles, 那么srclang 必须定义。 |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="sampleCaptions.vtt" srclang="en"> <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en"> <track kind="chapters" src="sampleChapters.vtt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1"> <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2"> </video> </body>
</html> |
注
- track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
- 一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。
资源指定 <source>
- <source> 标签为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源。这是一个空元素。它通常用于以不同浏览器支持的多种格式 (en-US)提供相同的媒体内容。
|
属性 |
描述 |
|
sizes |
是一个源大小列表，描述了源所代表的图像的最终渲染宽度。每个源大小都包含一个以逗号分隔的媒体条件长度对列表。浏览器使用此信息在布局页面之前确定要使用 srcset 中定义的图像。只有当 <source> 元素是 <picture> 元素的直接子元素时，sizes 属性才有效。 |
|
src |
<audio> 和 <video> 需要，媒体资源的地址。当 <source> 元素放置在 <picture> 元素中时，该属性的值将被忽略。 |
|
srcset |
由逗号分隔的一个或多个字符串的列表，指示由浏览器使用的源表示的一组可能图像。 每个字符串由以下部分组成：
列表中的每个字符串必须至少有一个宽度描述符或一个像素密度描述符才有效。在列表中，必须只有一个字符串包含相同的宽度描述符和像素密度描述符元组。浏览器选择在给定时间点显示的最合适的图像。只有当 <source> 元素是 <picture> 元素的直接子元素时，srcset 属性才有效。 |
|
type |
资源的 MIME 类型，可选择使用编解码器参数。有关如何指定编解码器的信息，请参阅 RFC 4281。 如果未指定 type 属性，则从服务器检索媒体类型并检查 Gecko 是否可以处理它；如果无法渲染，则检查下一个源。如果指定了 type 属性，则将其与 Gecko 可以播放的类型进行比较，如果不识别，则服务器甚至不会被查询；相反，会立即检查下一个源元素。 |
|
media |
资源预期媒体的媒体查询（en-US）；这应该只在 <picture> 元素中使用。 |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <video controls> <source src="foo.webm" type="video/webm"> <source src="foo.ogg" type="video/ogg"> <source src="foo.mov" type="video/quicktime"> I'm sorry; your browser doesn't support HTML5 video. </video> </body>
</html> |