探新Web前端开发(二)

音频和视频内容

web 开发者们一直以来想在 Web 中使用音频和视频，自21世纪初以来，我们的带宽开始能够支持任意类型的视频（视频文件比文本和图片要大的多）。在早些时候，传统的 web 技术（如 HTML ）不能够在 Web 中嵌入音频和视频，所以一些像 Flash (后来有 Silverlight ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。幸运的是，几年之后 HTML5 标准提出，其中有许多的新特性，包括 <video> 和 <audio>标签，以及一些 JavaScript 和 APIs 用于对其进行控制。

<video> 标签

<video>允许你简单的嵌入一段视频。一个简单的例子如下：

<video src="rabbit320.webm" controls>  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video>

当中的一些属性如下:
src
同 <img>标签使用方式相同，src 属性指向你想要嵌入网页当中的视频资源，他们的使用方式完全相同
controls
用户必须能够控制视频和音频的回放功能。你可以使用浏览器提供的控制接口，同时你也可以在 JavaScript （JavaScript API）当中使用这些控制接口。至少，这些媒体应该包括开始和停止，以及调整音量的功能。
<video> 标签内的段落
这个叫做后备内容 — 当浏览器不支持<video> 标签的时候，它将会显示出来，它使我们能够对旧的浏览器做一些兼容处理。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户可以至少访问到这个文件，而不会局限于浏览器的支持

多格式支持

以上的例子中有一个问题，你可能已经注意到了，如果你尝试使用像 Safari 或者 Internet Explorer 这些浏览器来访问上面的链接。视频并不会播放，这是因为不同的浏览器对视频格式的支持不同。

我们先来快速的了解一下术语。像 MP3、MP4、WebM这些术语叫做容器格式。他们是用不同的方式来播放音频或者视频的 — 也就是说这些容器是用不同的音频轨道、视频轨道、元数据来呈现媒体文件的
我们该怎么做呢？请看如下例子

<video controls>  <source src="rabbit320.mp4" type="video/mp4">  <source src="rabbit320.webm" type="video/webm">  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p></video>

现在我们将 src 属性从 <video>标签中移除，转而将它放在几个单独的标签 <source>当中。在这个例子当中，浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 向匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

其他video特性

这里有许多你可以用在 HTML5<video> 上的特性，请看我们的第三个例子：

<video controls width="400" height="400"       autoplay loop muted       poster="poster.png">  <source src="rabbit320.mp4" type="video/mp4">  <source src="rabbit320.webm" type="video/webm">  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p></video>

这串代码将会给我们呈现出如下页面：

新的特性：
width 和 height
你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。 无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
autoplay
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。
loop
这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
muted
这个属性会导致媒体播放时，默认关闭声音。
poster
这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload
这个属性被用来缓冲较大的文件，有3个值可选：
- “none”:不缓冲
- “auto”:页面加载后缓存媒体文件
- “metadata”:仅缓冲文件的元数据

显示音轨文件

现在，我们将讨论一个略微先进的概念，这个概念将会十分的有用。许多人不想（或者不能）听到 Web 上的音频/视频内容
给那些听不懂音频语言的人们提供一个音频内容的副本岂不是一件很棒的事情吗？所以，感谢 HTML5 <video>使之成为可能，有了 WebVTT 格式，你可以使用 <track> 标签

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：
subtitle
通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
captions
同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
timed descriptions
将文字转换为音频，用于服务那些有视觉障碍的人。
一个典型的 WebVTT 文件如下：
WEBVTT
1
00:00:22.230 –> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 –> 00:00:34.074
This is the second.
…
让其与 HTML 媒体一起显示，你需要做如下工作：
1. 以 .vtt 后缀名保存文件。
2. 用 <track>标签链接 .vtt 文件， <track> 标签需放在 <audio>或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。
如下:

<video controls>    <source src="example.mp4" type="video/mp4">    <source src="example.webm" type="video/webm">    <track kind="subtitles" src="subtitles_en.vtt" srclang="en"></video>

从对象到iframe - 其他嵌入技术

此刻，让我们进行深入学习，来看一些能让您在网页中嵌入各种内容类型的元素： <iframe>, <embed> 和<object> 元素。<iframe>用于嵌入其他网页，另外两个元素则允许您嵌入PDF，SVG，甚至Flash - 一种正在被淘汰的技术
<iframe>元素（连同其他嵌入内容的方式，如<canvas>，<video>等）提供了一种将整个Web文件嵌入到另一个页面中的方式，就好像它是一个现在经常使用的<img>或其他类似的元素。

自主学习：嵌入类型的使用

在这篇文章中，我们将直接进入自主学习部分，立即让你体会到嵌入技术的实用性。网络世界非常熟悉Youtube，但是很多人不了解它所提供的一些共享设施。让我们来看看Youtube如何让我们通过<iframe>在页面中嵌入任何我们喜欢视频
1. 首先，转到Youtube并找到您喜欢的视频。
2. 在视频下方，您会看到一个共享按钮 - 选择此选项可显示共享选项。
3. 选择“ 嵌入”选项卡，您将得到一些<iframe>代码 - 将其复制。
4. 将其插入下面的输入框，看看输出结果是什么。

<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen></iframe>

<iframe width="420" height="315" src="http://www.baidu.com" allowfullscreen="">&amp;#10;</iframe>

Iframe详解

是不是很简单又有趣呢？<iframe>元素旨在允许您将其他Web文档嵌入到当前文档中。这很适合将第三方内容纳入您的网站，您可能无法直接控制，也不希望实现自己的版本 - 例如来自在线视频提供商的视频，Disqus等评论系统，在线地图提供商，广告横幅等。您通过本课程使用的实时可编辑示例使用<iframe>实现。

有一些严重的 安全隐患需要考虑<iframe>s，们将在下面讨论，但这并不意味着你不应该在你的网站上使用它们 - 它只需要一些知识和仔细的思考。让我们更详细地探索这些代码。假设您想在其中一个网页上加入MDN词汇表，您可以尝试以下方式：

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"        width="100%" height="500" frameborder="0"        allowfullscreen sandbox>  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">    Fallback link for browsers that don't support iframes  </a> </p></iframe>

此示例包括使用以下所需的基本要素<iframe>：
allowfullscreen
如果设置，<iframe>则可以使用全屏API放置在全屏模式（稍微超出本文的范围）。
frameborder
如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;
src
该属性与<video>/<img>一样包含指向要嵌入的文档的URL的路径。
width 和 height
这些属性指定您想要的iframe的宽度和高度。

CSS-对Web进行样式化

CSS如何工作

什么是CSS

正如我们之前提到的，CSS是一种用于指定文档如何呈现给用户的语言 - 它们是如何样式，布局等等。
一个文档通常是用结构化的文本文件标记语言 - HTML是最常见的标记语言，但你也将遇到其他标记语言如SVG或XML。
向用户提交文件意味着将其转换成可供观众使用的形式。浏览器（如Firefox，Chrome或Internet Explorer）旨在可视化地呈现文档

CSS如何影响HTML

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

1. 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
2. 浏览器显示 DOM 的内容。
   

CSS 语句

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种。其它类型如下：

• @-规则 CSS中使用@-规则来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
  
  • @charset 和 @import （元数据）
  • @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
  • @font-face （描述性信息）
    具体语法示例：
    @import ‘custom.css’;
    该@-规则向当前 CSS 导入其它 CSS 文件

CSS选择器

标签选择器，类选择器，ID选择器是最常用的就不说了

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的 属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。

存在和值（Presence and value）属性选择器

这些属性选择器尝试匹配精确的属性值：

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

让我们看一个以下面的HTML代码片段为例：

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i><ul>  <li data-quantity="1kg" data-vegetable>Tomatoes</li>  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li></ul>

和一个简单的样式表:

/*     具有"data-vegetable"属性的所有元素,    将被给予绿色的文本颜色*/[data-vegetable] {  color: green}/*     具有"data-vegetable"属性且属性值刚好是"liquid"的所有元素，    将被给予金色背景颜色 */[data-vegetable="liquid"] {  background-color: goldenrod;}/*     具有"data-vegetable"属性且属性值包含"spicy"的所有元素，    即使某元素的该属性还包含其他属性值，    都会被给予红色的文本颜色 */[data-vegetable~="spicy"] {  color: red;}

子串值（Substring value）属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

• [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
• [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
• [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
• [attr*=val] : 选择attr属性的值中包含字符串val的元素。

伪选择器

伪选择器 —— 不选择实际元素，而是元素的某些部分，或仅在某些上下文中的元素。它们有两种主要类型 - 伪类和伪元素。

伪类（Pseudo-class）

一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个 checkbox 被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。
常见的有: :active，:checked，:default，:disabled，:hover，:focus
更多的伪类请参考:更多伪类

伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

一个伪元素（pseudo-element）例子
展示一个简单的 CSS 例子，如何在所有超链接元素后面的增加一个箭头：

<ul>  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li></ul>

让我们加上 CSS 规则：

[href^=http]::after {  content: '⤴';}

我们可以得到这样的效果：