html5多媒体api:,HTML5（四）：多媒体API

video新的特性：

width 和 height

你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

autoplay

这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

loop

这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

muted

这个属性会导致媒体播放时，默认关闭声音。

poster

这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload

这个属性被用来缓冲较大的文件，有3个值可选：

"none" ：不缓冲

"auto" ：页面加载后缓存媒体文件

"metadata" ：仅缓冲文件的元数据

audio

标签不支持 width/height 属性 — 由于其并没有视觉部件，也就没有可以设置 width/height 的内容。

同时也不支持 poster 属性 — 同样，没有视觉部件。

除此之外， 标签支持所有 标签拥有的特性

注意：

可以在 Javascript 中调用 load() 方法来重置媒体

音轨

当音轨被添加或删除时，你可以通过监听相关事件来侦测到。具体来说，通过监听 AudioTrackList 对象的 addtrack 事件(即 HTMLMediaElement.audioTracks 对象)，你可以及时对音轨的增加做出响应。

const mediaElem = document.querySelector("video");

mediaElem.audioTracks.onaddtrack = function(event) {

audioTrackAdded(event.track);

}

WebVTT

subtitles

通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。

captions

同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。

timed descriptions

将文字转换为音频，用于服务那些有视觉障碍的人。

需要做如下工作：

1、以 .vtt 后缀名保存文件。

2、用 标签链接 .vtt 文件， 标签需放在 或 标签当中，同时需要放在所有 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。

Iframe

允许您将其他Web文档嵌入到当前文档中。

allowfullscreen

如果设置，则可以通过全屏API设置为全屏模式(稍微超出本文的范围)。

frameborder

如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;

src

该属性与/一样包含指向要嵌入文档的URL路径。

width 和 height

这些属性指定您想要的iframe的宽度和高度。

备选内容

与等其他类似元素相同，您可以在标签之间包含备选内容，如果浏览器不支持，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在您几乎不可能遇到任何不支持的浏览器。

sandbox

该属性需要在已经支持其他功能(例如IE 10及更高版本)但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置;

注意：为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间(重要的SEO指标)。

SVG

SVG用于标记图形，而不是内容。

创建一个圆和一个矩形：

baseProfile="full"

width="300" height="200"

xmlns="http://www.w3.org/2000/svg">

通过 元素嵌入SVG，你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性(或者如果您的SVG没有固有的宽高比)。

src="equilateral.svg"

alt="triangle with all three sides equal"

height="87px"

width="100px" />

ps:可以通过在元素嵌套，使图像轻松地成为超链接。

缺点:

无法使用JavaScript操作图像。

如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 (从SVG文件调用的外部样式表不起作用)

不能用CSS伪类来重设图像样式(如:focus)。

在HTML中引入SVG代码

优点:

将 SVG 内联减少 HTTP 请求，可以减少加载时间。

您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 SVG外观属性 作为CSS属性。

内联SVG是唯一可以让您在SVG图像上使用CSS交互(如:focus)和CSS动画的方法(即使在常规样式表中)。

您可以通过将 SVG 标记包在元素中，使其成为超链接。

缺点:

这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护(resource-intensive maintenance)。

额外的 SVG 代码会增加HTML文件的大小。

浏览器不能像缓存普通图片一样缓存内联SVG。

您可能会在 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。

创建自适应的图片

分辨率切换：不同的尺寸

可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。

sizes="(max-width: 320px) 280px,

(max-width: 480px) 440px,

800px"

src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

一个文件名 (elva-fairy-480w.jpg.)

一个空格

图像的固有宽度(以像素为单位)(480w)——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，可以通过检查你电脑上的图片文件找到(例如，在Mac上，你可以在Finder上选择这个图像，然后按 Cmd + I 来显示信息)。

sizes定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

一个媒体条件((max-width:480px))——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是480像素或更少”。

一个空格

当媒体条件为真时，图像将填充的槽的宽度(440px)

注意:

对于槽的宽度，你也许会提供一个固定值 (px, em) 或者是一个相对于视口的长度(vw)，但不是百分比。你也许已经注意到最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。 当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。

分辨率切换: 相同的尺寸, 不同的分辨率

src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">