【音频和视频标签】
音频和视频标签
- 1. html5中的 音频/视频标签
- 1.1 ★ audio 定义 音频
- 1.1.1 audio 音频标签的 HTML5 中的新属性
- ⑴ autoplay 属性: 自动播放 (布尔 属性)
- ⑵ controls 属性: 播放控件 (布尔 属性)
- ⑶ loop 属性: 循环播放 (布尔 属性)
- ⑷ muted 属性: 静音 (布尔 属性)
- ⑸ preload 属性: 预加载方式 (枚举 属性)
- ⑹ src 属性: 音频地址 (可用 source 标签 替代)
- ⑺ crossorigin 属性: 跨源 请求 (搭配 canvas 标签)
- 1.1.2 audio 使用说明
- 1.2 ★ source 指定 可替换 的 视频/音频/图像 文件 (搭配 audio,vedio,picture 标签)
- 1.2.1 source 资源标签的 属性
- ⑴ media 属性: 匹配的 媒体/设备 (搭配 picture 标签)
- ⑵ src 属性: 媒体资源 地址 (搭配 audio,vedio 标签)
- ⑶ type 属性: 资源类型
- ⑷ sizes 属性: (限定 媒体条件的) 多选 图像大小 (必须搭配 srcset 属性)
- ⑸ srcset 属性: (可带 尺寸描述符的) 多选 图像 地址
- 1.3 ★ track 为 音频/视频 指定 外部文本 轨道 (搭配 audio,vedio 标签)
- 1.3.1 track 轨道标签的 属性
- ⑴ default 属性: 默认 文本轨道 (布尔 属性)
- ⑵ kind 属性: 文本轨道 种类 (枚举 属性)
- ⑶ label 属性: 文本轨道 标题 (用户可见)
- ⑷ src 属性: 文本轨道 地址 (必需 属性)
- ⑸ srclang 属性: 文本轨道 语言
- 1.4 ★ video 定义 视频
- 1.4.1 video 视频标签的 属性
- ⑴ height 属性和 width 属性: 高度和宽度
- ⑵ poster 属性: 海报 图像地址 (下载或播放前 显示)
- ⑶ preload 属性: 预加载方式 (枚举 属性)
- 1.4.2 支持不同浏览器: 设置多种格式
- 结束语
1. html5中的 音频/视频标签
| 标签名 | 用于 |
|---|---|
① |
定义 音频 内容。 |
② |
定义 媒体资源 地址。 |
③ |
定义用在 媒体播放器中的 文本轨道。 |
④ |
定义 视频内容。 |
1.1 ★ audio 定义 音频
- 音频 内容: 如何定义音频 ? 比如 音乐 或其他 音频流。
- 使用
音频 标签 - 美 /ˈɔːdioʊ/
- 元素用于 在文档中 表示音频内容。
- 使用
- 多个 音频资源:
元素 可以包含 多个 音频资源- 资源 地址: 这些音频资源 可以使用
audio-src属性 或者
- 资源 地址: 这些音频资源 可以使用
- 当前 音频
audio标签支持的 3 种格式- 支持格式 不同: 由于版权等 原因,不同的浏览器 可能会支持 不同的 音频格式
- 同时使用 3 种格式: 目前的做法是,把音频文件,转换成 以下 3 种格式,以兼容 各大主流 浏览器.(
.wav不使用也可以,前两种 足够支持 主流浏览器了.)
- 示例1: 同时提供 3 种音频格式,用以兼容 各大浏览器.
<audio src="" controls="controls">
<source src="bgsound.mp3" />
<source src="bgsound.ogg" />
<source src="bgsound.wav" />
<p>您的浏览器,不支持 播放声音.p>
audio>
- 格式匹配
- 当第一种格式 不支持时,浏览器会继续 匹配 第二种格式
- 第二种 也不支持时,浏览器 会继续匹配 第三种 格式
- 对于现在的主流浏览器 而言,一般这 3 种 音频格式中,会有一个被支持的.
-
回退显示 标签 内容:
声音 标签的使用- 老的浏览器 不支持
声音标签,如何处理?- 在开始标签 和结束标签之间 放置文本内容,进行提示.
- 对于 不支持
元素的浏览器，会显示的标签内容,作为回退显示, 支持的话,就不会显示 标签内容了.
- 老的浏览器 不支持
-
音频标签 和属性的 浏览器支持- IE 8 以及更早的版本 不支持
标签。 
- IE 8 以及更早的版本 不支持
1.1.1 audio 音频标签的 HTML5 中的新属性
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① src | =url | 要播放的 音频的 URL。 |
| ② autoplay | =autoplay | 如果出现该属性，则音频在 就绪后 马上播放(自动播放)。 |
| ③ controls | =controls | 如果出现该属性，则向用户 显示控件，比如播放按钮。 |
| ④ loop | =loop | 循环播放,如果出现该属性，则每当音频结束时 重新开始播放。 |
| ⑤ muted | = muted | 规定视频输出应该 被静音。 |
| ⑥ preload | =preload | 如果出现该属性，则音频预加载 (在页面加载后 进行加载)，并预备播放。如果使用 “autoplay”，则忽略该属性。 |
| ⑥ crossorigin | anonymous,use-credentials | 跨源请求.搭配 |
<audio src="someaudio.wav">
您的浏览器不支持 <code>audiocode> 标签。
audio>
⑴ autoplay 属性: 自动播放 (布尔 属性)
- ⑴
声音标签的autoplay自动播放 属性- 自动 播放: 如何规定 一旦音频 就绪 马上开始播放 ?
- 使用 声音标签的
autoplay自动播放属性 - 一个 布尔属性
- 不等 整个文件 下载完成: 如果指定，音频将 自动开始播放，而不是等待 整个音频文件 完成下载。
- 避免使用:
- ❶ 用户体验差: 自动播放 音频( 或带有 音频轨道的 视频)的网站 可能会给用户 带来不愉快的体验，所以应该 尽可能避免。没有预料下, 网页 突然 发出响声,确实让人感觉不好.
- ❷ 用户 启用: 如果你必须提供 自动播放功能，你应该要求 用户明确地 启用它.
- 使用 声音标签的
- 将声音 设置为自动播放：
autoplay="autoplay"
- 自动 播放: 如何规定 一旦音频 就绪 马上开始播放 ?
⑵ controls 属性: 播放控件 (布尔 属性)
- ⑵
声音标签的controls播放控件 属性- 播放控件: 如何规定浏览器 应该为音频提供 播放控件 ?
- 使用声音标签的
controls控件属性 - 如果设置了 该属性，则规定 不存在 作者设置的 脚本控件。
- 使用声音标签的
- 浏览器 播放控件 一般 包括哪些：
- ❶ 播放
- ❷ 暂停
- ❸ 定位 (用鼠标 指定到某位置)
- ❹ 音量
- ❺ 全屏切换 (如果可用)
- ❻ 字幕（如果可用）
- ❼ 音轨（如果可用）
- ❽ 下载
controls播放控件 属性值- 布尔 属性
controls="controls"
- 播放控件: 如何规定浏览器 应该为音频提供 播放控件 ?
- 示例1: 设置一段 有控件,自动播放的声音
- 嵌套关系
src type
<html>
<body>
<audio controls="controls" autoplay="autoplay">
<source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg" />
<source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.(浏览器支持 audio 标签,不会显示这段内容)
audio>
body>
html>
- 测试
- 控件属性 和资源显示:
- 对于
audio声音 标签来说,不设置controls控件属性,页面上 就看不见 这个声音资源,显示空白 - 要想看见 纯音频资源,就要设置 音频的控件.
- 对于
- 控件包含(谷歌浏览器 和360浏览器中显示): 5个选项 = 暂停+播放 一个按钮,进度条,静音,音量控制,下载
- IE中,不包含下载选项,如下
- IE中,不包含下载选项,如下
- 控件属性 和资源显示:
- 自动播放: 设置了
autoplay自动播放,网页加载后 就自动播放音乐,没有设置,声音就是不播放的,静音的.- 自动播放次数: 默认1次,播放完一次,就停止播放了
⑶ loop 属性: 循环播放 (布尔 属性)
- ⑶
声音标签的loop循环播放 属性-
循环 播放: 如何规定 当音频结束后将 重新开始播放 (循环播放) ?
- 使用声音标签的
loop循环播放 属性
- 使用声音标签的
-
循环 播放
loop属性值- 布尔属性
loop="loop"
-
带有浏览器 默认控件和 循环播放的
声音 资源：
-
<audio controls="controls" loop="loop">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
audio>
- 测试
- 设置了
loop循环属性,一旦开始播放,就会 一直重复播放,直到点击暂停,才会停止
- 设置了
⑷ muted 属性: 静音 (布尔 属性)
- ⑷
声音标签的muted静音 属性- 默认 静音: 如被设置，则规定声音 应该被静音。
- 一个布尔属性，指示音频 最初是否 被消音。
- 默认值:
false。默认 不静音的意思. - 播放 无声音: 设置了 这个属性,点击 播放按钮,不会有声音,因为默认是 没音量,静音的,要自己加音量,或者 取消静音.
- 不允许 简写:
muted静音属性,HTML 与 XHTML 之间的差异- 在 XHTML 中，不允许 属性简写，
muted属性必须定义为。
- 在 XHTML 中，不允许 属性简写，
- 声音标签的
muted静音属性的 浏览器支持- IE 9 以及更早的版本 不支持
muted属性。
- IE 9 以及更早的版本 不支持
- 默认 静音: 如被设置，则规定声音 应该被静音。
- 把音频 设置为 静音：
<audio controls="controls" muted="muted">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
audio>
- 测试
- 播放 没声音: 设置静音后,即使 点击播放,也是静音没声音的
- 取消静音: 点击静音的喇叭选项,或者点击 加音量选项
⑸ preload 属性: 预加载方式 (枚举 属性)
-
⑸
声音标签的preload预加载 属性 -
音频 预加载方式: 如何规定 是否在页面加载后 载入音频 ?
- audio-
preload枚举属性， - 提示浏览器 使用何种加载方式 以达到最好的用户体验
- 不强制 仅提示: 浏览器 不会被规范强制 去遵循 此属性的值;这只是个提示。
- audio-
-
矛盾属性:
autoplay自动播放- ❶ 被忽略: 如果设置了
autoplay属性，则忽略 预加载方式 属性。(无论设置的什么属性值) - ❷ 优先级: 自动播放
autoplay属性 优先于 预加载preload。- 如果指定了 自动播放，浏览器显然 必须要开始下载音频 进行播放。(不下载资源 播放什么呢 orz ?)
- ❶ 被忽略: 如果设置了
-
audio-
preload预加载的属性值- 默认值: 每个浏览器的默认值 是不同的。规范建议 将其设置为 元数据
meta。
- 默认值: 每个浏览器的默认值 是不同的。规范建议 将其设置为 元数据
| 属性值 | 用于 |
|---|---|
| ❶ auto | 加载 整个音频. 当页面加载后 载入整个音频,示意用户 可能 会播放音频；换句话说，如果有必要，整个音频 都将被加载，即使 用户不期望使用。 |
| ❷ meta | 只载入 元数据. 当页面加载后 只载入 元数据,示意用户 即使可能 不会播放该音频，但 获取元数据 (例如 音频长度) 还是 有必要的。 |
| ❸ none | 不预加载 音频. 当页面加载后 不载入音频,示意用户可能 不会播放该音频，或者服务器 希望节省带宽；换句话说，该音频 不会被缓存； |
| ❹ 空字符串 | 加载 整个音频. 等同于 auto属性 |
- 不设置属性的 默认值: 假如不设置
preload预加载 属性，预加载 默认值 = 浏览器定义的默认值- （不同浏览器 会选择自己的默认值）， 即使 规范建议设置为
metadata.
- （不同浏览器 会选择自己的默认值）， 即使 规范建议设置为
- 优先级比较:
autoplay自动播放 属性 优先于preload预加载 属性- 假如用户想 自动播放视频，很显然 浏览器需要下载视频。(不管
preload怎么设置的)
- 假如用户想 自动播放视频，很显然 浏览器需要下载视频。(不管
- 同时设置: 同时设置
autoplay和preload属性 在规范里是允许的。- 规范没有强制 浏览器去遵循该属性的值；这仅仅只是个提示。
- 设置为 预加载 整个音频的声音元素：
<audio controls="controls" preload="auto">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
audio>
- 预加载的音频,并不会自动播放
⑹ src 属性: 音频地址 (可用 source 标签 替代)
- ⑹
声音标签的src资源 属性- 音频 地址: 如何指定 要播放的 音频的 URL ?
- 使用
src资源属性
- 使用
- 替代标签
- 可以使用
- 可以使用
- 音频 地址: 如何指定 要播放的 音频的 URL ?
<html>
<body>
<audio src="http://www.w3school.com.cn/i/song.ogg" controls="controls">
Your browser does not support the audio element.
audio>
body>
html>
- 添加 音频资源地址 的方法
- ① 直接通过
音频标签的 audio-src资源属性,添加资源 - ② 通过子元素
src添加音频资源
- ① 直接通过
⑺ crossorigin 属性: 跨源 请求 (搭配 canvas 标签)
-
⑺
声音标签的crossorigin资源 属性- 枚举属性
- 跨源 获取音频: 指示是否 使用
CORS获取相关 音频文件。- 跨源 资源共享
CORS: (Cross-Origin Resource Sharing) 跨源 资源共享- ❶ 跨源访问的 请求响应: CORS(跨源 资源共享) 是一个系统，由 传输 HTTP头 组成，它决定浏览器 阻止或允许 前端 JavaScript代码 访问跨源请求的 响应。
- ❷
same-origin security policy同源安全策略 禁止 跨源访问资源。- 跨源 访问: 但是
CORS允许web服务器, 选择允许 跨源访问 它们的资源。
- 跨源 访问: 但是
- 跨源 资源共享
crossorigin属性值:crossorigin="anonymous |use-credentials "- ① 无证书 跨域请求:
anonymous- 美 /əˈnɑːnɪməs/ ,匿名的
- 执行 一个跨域的请求（比如，有
Origin: HTTP header）。但是 没有发送证书。 - （比如，没有
cookie，没有X.509证书，没有HTTP基本的授权认证） - 图像 污染+使用 受限制: 如果服务器 没有给源站 发送证书（即 没有设置
Access-Control-Allow-OriginHTTP头部），图像会 被污染 , 而且它的使用 会被限制。
- ② 有证书 跨域请求:
use-credentials- 美 /krəˈdenʃlz/
- 执行一个 跨域请求（比如，有
Origin: HTTP header）.同时 发送证书. - （比如，有
cookie, 证书a certificate, 有HTTP基本的授权认证）。 - 给源站 发送证书: 通过
Access-Control-Allow-CredentialsHTTP header
- ③ 未设置 属性: 如果属性 不存在，则在 没有
CORS请求的情况下 获取资源.- 当用户 并未显式使用 本属性时，默认不使用
CORS发起请求,默认不跨源 访问. - (例如，不会 向服务器 发送
OriginHTTP 头部信息) - 用以防止 资源在
中 不受污染的使用。对资源 也算是种保护.
- 当用户 并未显式使用 本属性时，默认不使用
- ④ 无效值, 默认 无证书跨域请求: 如果是 无效值，默认使用
anonymous无证书 跨域请求 属性值。
- ① 无证书 跨域请求:
-
的搭配使用: 音频可视化
1.1.2 audio 使用说明
- ⑴ 多个 音频源: 因为 不同的浏览器 有时候会支持 不同的文件类型 和 音频编解码器,所以需要多个 音频源,用来给 浏览器选择.
- 多个音频源+搭配 标签: 可以在 子元素
- 多个音频源+搭配 标签: 可以在 子元素
- ⑵ 播放控件
- ❶ 浏览器 默认播放控件: 如果 不指定
controls属性，则音频播放器 将不包含 浏览器的默认控件。 - ❷ 自定义 控件: 但是，可以使用 JavaScript 和 HTMLMediaElement API 创建自己的自定义控件。
- ❶ 浏览器 默认播放控件: 如果 不指定
- ⑶ 监控 音频 (媒体事件): 为了对音频内容 进行 精确控制，
HTMLMediaElements会触发 许多不同的 媒体事件。- 这 提供了一种方法 来 监控 音频 的获取过程，可以观察错误 或检测什么时候 开始播放 或操作它。
- ⑷ 生成 和操作音频 (音频 API): 可以使用 Web Audio API 直接从 JavaScript 代码 生成 和操作音频.
- ⑸ 字幕: 音频 不能直接 有字幕.
音频元素 不能直接 像视频元素 那样 有字幕。(设置音频字幕,方法 见下方内容.)
- ⑹ 音频 控件: 必须指定
controls控件 属性，否则音频元素 本身没有 固有的可视输出，在这种情况下，将显示 浏览器的默认控件。- ① 设置 默认控件 显示
- ❶ 默认 行内元素: 默认控件的显示值 默认 为 行内元素
display:inline - ❷ 建议设置 块元素: 一般设置为 块元素
display:block, 可以改进 定位和布局 方面的 控制，除非是 位于文本块内 或类似的位置,不用设置为 块元素。
- ❶ 默认 行内元素: 默认控件的显示值 默认 为 行内元素
- ② 设置 默认控件 样式: 可以用 影响块的属性 来设置 默认控件的样式，例如,可以给它一个 边框、边框半径、内边距、外边距 (
border ,border-radius, padding, margin ,etc.)等等。- ❶ 不能改变 单个组件样式: 然而，不能在 音频播放器中 设置 单个组件的样式(例如, 改变按钮大小 或图标，改变字体等)，而且不同浏览器的控件 是不同的。
- ❷ 跨浏览器的 一致外观: 要获得 跨浏览器的一致外观，需要创建 自定义控件;可以按照希望 对它们进行 标记和样式化，然后可以使用 JavaScript 和
HTMLMediaElementAPI 来连接它们的功能。
- ① 设置 默认控件 显示
-
⑺ 音频的 访问性问题
-
① 对话 音频(需要字幕): 语音对话 音频文件, 应该提供 准确描述其内容的 字幕和文字记录。
- 字幕 用处: 这是为了 当用户 听不清时,依然可以 理解 音频的含义.
- 自动 字幕: 如果使用 自动字幕服务，重要的是要 检查生成的内容，以确保它 准确地表示 源音频。
- 指定 字幕 : 使用 WebVTT 指定字幕.
- WebVTT
- Web Video Text Tracks Format :网络视频 文本跟踪 格式
- 显示 文本: 一种使用
元素显示 定时文本轨道（如字幕或标题）的格式。 - WebVTT 文件的 MIME 类型:
text/vtt。 - 一个 WebVTT 文件（
.vtt） 包含: 任意条 带时间的提示性 文本.
- 显示 文本: 一种使用
- Ⅰ.添加文本 到视频: 主要用途是 将文本 添加到
。不是添加到 音频,所以音频 无法直接使用. - Ⅱ. △ 添加文本 到音频
- ❶ 必须找到一个 库或框架 来 提供这个功能，或者自己编写代码 来显示标题/ 字幕。
- ❷ 使用
视频元素 播放音频，该元素 支持WebVTT。
WebVTT是一种 基于文本的格式，必须使用UTF-8进行 编码。
- Web Video Text Tracks Format :网络视频 文本跟踪 格式
- WebVTT
- 字幕的 信息:
- ❶ 关键的 音乐和声音: 在WebVTT 文件中, 除了 对话的字幕外， 也应该用文字 表明 传达重要信息的 音乐 和声音效果。包括 情绪和语气。
- ❷ (从文字上) 传递 音频感情: 以向观众提供 基调和情感上 的洞察力, 可以帮助听者 建立情绪.
-
② 回退 显示: 给
设置 标签内容, 为使用 不支持元素的浏览器 提供一些内容(如, 直接下载链接).
-
-
点击查看: 更多 初学者教程
- 示例1: 有两个 音频源的 音频文件
- 嵌套关系
audio > source*2audio > p >a
<audio controls="controls">
<source src="myAudio.mp3" type="audio/mpeg">
<source src="myAudio.ogg" type="audio/ogg">
<p>你的浏览器不支持HTML5音频。 请点击 <a href="myAudio.mp4">这个链接,链接到音频资源.a> instead.p>
audio>
音频 类型: 在source-type属性中 包含文件的 MIME类型 总是有用的，因为浏览器能够 立即判断 它是否可以 播放该文件，如果不能，则 不会 浪费时间。
1.2 ★ source 指定 可替换 的 视频/音频/图像 文件 (搭配 audio,vedio,picture 标签)
-
⑴ 可选的 多个资源:
和,- 为 音频标签 和视频标签 ,多选 图片标签 添加(提供) 多个资源
- 空标签: 没有标签内容
-
⑵ 搭配 标签:
和, -
⑶ 选择 资源: 如何规定 可选择 的 视频/音频 文件?
- 让浏览器根据 对媒体条件,资源类型等 进行 选择资源
- 使用
- 用于: 当 不同浏览器 支持的 不同 媒体文件格式时, 提供 多个可选的资源,让浏览器 根据需要 选择资源.
-
⑷
- IE8 以及更早的版本 不支持
- IE8 以及更早的版本 不支持
1.2.1 source 资源标签的 属性
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① media | =media query | 规定 媒体条件。 |
| ② src | =url | 资源 地址. 规定 媒体文件的 URL。 |
| ③ type | =mime type | 资源 类型. 规定 媒体资源的 MIME 类型。 |
| ④ sizes | (一个或多个) 媒体条件(空格)尺寸值 | 一个或多个 (限定媒体条件的) 图像大小.(必须 搭配srcset 属性) |
| ⑤ srcset | 图像地址url+空格+描述符(可选) | 多个图像 地址url (可带尺寸) |
- 设置 有两份 资源文件 的音频播放器。浏览器会选择 它所支持的文件：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 音频元素。
audio>
⑴ media 属性: 匹配的 媒体/设备 (搭配 picture 标签)
- ⑴
media匹配媒体/设备 属性- 匹配的 媒体/设备
- 规定 资源文件 要匹配 何种媒体/设备
- 判断 支持: 浏览器 可使用媒体匹配提交, 来判断 自己是否能播放 这个文件。如果不能播放，则可以选择 不进行下载。
- 限定 使用: 只在
- 规定 资源文件 要匹配 何种媒体/设备
- 匹配 媒体/设备
media的 属性值：该属性可接受 多个值。 - 使用
media属性：
- 匹配的 媒体/设备
media匹配媒体/设备 属性值 可能用到的 运算符
| 值 | 用于 |
|---|---|
and |
规定 AND 运算符。 |
not |
规定 NOT 运算符。 |
, |
规定 OR 运算符。 |
media匹配媒体/设备 属性值中的 设备类型
| 值 | 用于 |
|---|---|
all |
默认。适用于 所有设备。 |
aural ['ɔrəl] |
语音合成器。 |
braille [brel] |
盲文点字 反馈设备。 |
handheld |
手持 设备（小型屏幕、有限带宽） |
projection |
投影仪 |
print |
打印 预览模式/打印页面 |
screen |
计算机 屏幕 |
tty |
电传打字机 以及类似的使用等宽字符网格的媒体。 |
tv |
电视机 类型设备（低分辨率、有限的滚屏能力）。 |
media媒体设备属性的属性值中 的设备类型 限制值
| 值 | 用于 | 示例 |
|---|---|---|
width |
规定 目标显示区域 的宽度。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (min-width:500px)” |
height |
规定目标显示区域 的高度。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (max-height:600px)” |
device-width |
规定目标显示器/纸张的 宽度。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (device-width:500px)” |
device-height |
规定目标显示器/纸张的 高度。 可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (device-height:600px)” |
orientation |
规定目标显示器/纸张的 方向。可能的值：“portrait” 或 “landscape”。 | 例子：media=“all and (orientation: landscape)” |
aspect-ratio |
规定目标显示区域的 宽度/高度比。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (aspect-ratio:16/10)” |
device-aspect-ratio |
规定目标显示器/纸张的 device-width/device-height 比率。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (aspect-ratio:16/10)” |
color |
规定目标显示器的 bits/color（每色位）。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (color:10)” |
color-index |
规定目标显示器可以处理的 颜色数。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (min-color-index:16777216)” |
monochrome |
规定单色帧 缓冲中的 bits/pixel（位/像素）。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“screen and (monochrome:2)” |
resolution |
规定目标显示器/纸张的 像素密度 (dpi 或 dpcm)。可使用 “min-” 和 “max-” 前缀。 | 例子：media=“print and (resolution:326dpi)” |
scan |
规定电视显示器的 扫描方式。可能的值：“progressive” 和 “interlace”。 | 例子：media=“tv and (scan:interlace)” |
grid |
规定输出设备是 网格还是位图。可能的值：“1” 为网格，否则为 “0”。 | 例子：media=“handheld and (grid:0)” |
<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
⑵ src 属性: 媒体资源 地址 (搭配 audio,vedio 标签)
- ⑵
src资源 属性- 如何规定 媒体文件的 URL ?
- 使用
src资源属性 - 必需对于
和src媒体资源 地址。 - 被忽略: 当
src属性的值 将被忽略。(使用的是srcset提供的 资源地址)
- 使用
- 如何规定 媒体文件的 URL ?
⑶ type 属性: 资源类型
-
⑶
type类型 属性- 资源 类型: 规定 媒体资源的 MIME 类型 ?
- 使用 资源标签的
type类型属性
- 使用 资源标签的
type类型 属性的语法type类型属性的属性值- MIME_type (也称为 media type 媒体类型)
- 规定 媒体资源的 MIME 类型。
- 常用的 MIME 类型有哪些 ?
- ① 用于视频：
video/oggvideo/mp4video/webm
- ② 用于音频：
audio/oggaudio/mpeg
- ① 用于视频：
- 资源 类型: 规定 媒体资源的 MIME 类型 ?
-
获取完整的标准 MIME 类型列表
-
source-
type属性的指定 和查询服务器- 没指定类型,会查询服务器: 如果 没有指定
type类型 属性，则从服务器 检索媒体的类型 并检查 内核是否 能够处理它;- 如果不能呈现，则检查下一个
- 如果不能呈现，则检查下一个
- 指定了类型,不查询 服务器:
- 类型 比较: 如果指定了
type属性，则将其 与内核可以使用的类型 进行比较 - 如果不能识别 该属性，甚至不会查询服务器;会立即 检查下一个
- 类型 比较: 如果指定了
- 节省时间: 所以指定 source-
type类型 属性比较好,可以节省 查询服务器的时间
- 没指定类型,会查询服务器: 如果 没有指定
-
示例1: 指明资源类型的 音频文件, 使用
type属性：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 音频元素。
audio>
- 如果浏览器 不支持 音频或视频元素，则显示一个提示。
- 如果浏览器 支持元素 但不支持 任何指定的格式，则会引发 错误事件
error，并且 默认媒体控件(如果启用) 将指示错误。
- 知识拓展链接
- (大部分都是英文的,可以用 有道词典,进行 划词翻译来看)
- 媒体类型和格式 指南
- 媒体类型 media types (又称为 mime 类型)
- 一般，浏览器支持的媒体格式 完全取决于 浏览器的创建者，这可能会使 web开发工作变得复杂.
- 图像 文件类型 和格式 指南
- 媒体容器(文件类型)
- 网络 音频编解码器 指南
- 网络 视频编解码器 指南
- △ 常用媒体类型中的 “编解码器”参数
⑷ sizes 属性: (限定 媒体条件的) 多选 图像大小 (必须搭配 srcset 属性)
sizes图像大小- 使用 前提:
-
❶ 限定 父元素是
size属性 只有在 -
❷ 音频/视频 无用: 就是说 资源标签
sizes属性,仅对 多图片选择 的 -
sizes 属性值: (以 逗号 隔开的) 一个 或多个 字符串。
-
(一个 或多个) 图片大小: 表示 资源大小
sizes="(min-width: 600px) 200px, 50vw"- (当匹配了 媒体条件
min-width: 600px时，图像将 宽 200px，否则 宽 50vw（视图宽度的50%）。)
- (当匹配了 媒体条件
- 每一个 资源(图片)大小 包括：= 媒体条件+宽度值 +(,不满足时 宽度值)
- ① 媒体条件: 一个 媒体条件。
- 针对 特定设备: 添加自 CSS3，允许内容的呈现 针对一个特定范围的输出设备 而进行裁剪，而不必 改变内容本身。
- 媒体条件: 描述 用户代理、输出设备 或环境的 特定特性。
- 媒体特性表达式 测试它们的 存在或值，并且完全是 可选的。
- 每个媒体特性表达式: 必须用 括号括起来
- 针对 特定设备: 添加自 CSS3，允许内容的呈现 针对一个特定范围的输出设备 而进行裁剪，而不必 改变内容本身。
- ② 宽度值: 一个 资源宽度的值。
- 预期 尺寸: 资源宽度的值 , 被用来 指定图像的 预期宽度。
- 不满足 媒体条件时 尺寸值: 列表最后一项的 尺寸值,是不满足这个条件时 才应用的。
- ① 媒体条件: 一个 媒体条件。
-
选择 图像(地址):
- 搭配 属性: 当
srcset使用 ‘w’ 宽度描述符时，用户代理 根据 当前图像宽度 来选择srcset中 合适的一个 图像URL。- ❶ 确定 图像: 在布局页面之前，浏览器将 使用这些信息 来确定在
srcset中定义 要使用的 图像。 - ❷ 仅限
w宽度尺寸 描述符: 请注意，只有在提供srcsetw宽度尺寸 描述符 而不是像素比值(例如，200w而不是2x)时，大小 才会产生影响。
- ❶ 确定 图像: 在布局页面之前，浏览器将 使用这些信息 来确定在
- 图片 显示大小: 被选中的尺寸, 决定 图像的显示大小（如果没有 CSS样式 被应用的话）。
- 搭配 属性: 当
-
使用 条件:
- 搭配属性: 必须搭配
srcset属性.- 如果 没有设置
srcset属性，或者 没值，那么sizes属性 也将不起作用。限定 媒体条件的图像尺寸大小,是在有 多个可带尺寸的图像地址srcset存在时 才有效,因为这样才能匹配,
- 如果 没有设置
- 反之,多个(可带尺寸的)图像地址
srcset则不一定要搭配sizes属性,比如只设置 一个地址 没有指明尺寸的 图像地址srcset属性,可以仅作为资源地址使用.
- 搭配属性: 必须搭配
-
⑸ srcset 属性: (可带 尺寸描述符的) 多选 图像 地址
-
srcset多选 图像 地址- 使用 前提:
- 限定 父元素是
srcset属性 只有在
- 限定 父元素是
srcset属性值: (以 逗号 分隔的 一个或多个) 字符串- 多选 图像 地址:
- 表明 一系列 用户代理 可能使用的 图像。
- 属性值 字符串 组成: 每一个字符串 由以下组成：图像地址+空格+ 描述符
- ① 图像地址: 一个图像的 URL。
- ② 宽度 描述符 / 像素密度 描述符: 可选的，空格后 跟以下的其一：
- ❶ 宽度 描述符:
- 一个宽度描述符，这是一个 正整数，后面紧跟 ‘
w’ 符号。(w: width,宽度) - 换算值: =
srcset宽度/sizes宽度- 该整数宽度 除以
sizes属性给出的资源（source）大小 来计算得到 有效的像素密度，即换算成 和x描述符 等价的值。
- 该整数宽度 除以
- 一个宽度描述符，这是一个 正整数，后面紧跟 ‘
- ❷ 像素密度 描述符 :
- 一个像素密度描述符，这是一个 正浮点数，后面 紧跟 ‘
x’ 符号。
- 一个像素密度描述符，这是一个 正浮点数，后面 紧跟 ‘
- ❸ 必须 设置 描述符: 列表中的每个字符串 必须 至少有一个 宽度描述符 或像素密度描述符 才有效。(存疑,可是 有的没有设置描述符 …有这个必要性吗)
- △ 使用说明:
- 描述符 不要 混合使用: 在同一个的
srcset属性中 混合使用 宽度描述符 和像素密度描述符时，会导致 该值无效。 - 描述符 不要重复: 重复的描述符（比如，在同一个
srcset两个源 都是 ‘2x’）也是 无效的。
- ❶ 宽度 描述符:
- 使用 前提:
-
多个图像 地址的 意义
- 用户 可调整选择: 用户代理 可以自行选择 任何可用的源。这为他们提供了 很大的余地，可以根据 用户偏好或 带宽条件 来调整选择。
- 示例1: 使用
srcset和sizes属性,根据sized指定的媒体条件和宽度 进行选择- 当匹配了 媒体条件
min-width: 600px时，图像将 宽 200px，否则 宽 50vw（视图宽度的50%）。
- 当匹配了 媒体条件
<picture>
<source srcset="clock-demo-thumb-200.png 200w,
clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
<img src="clock-demo-thumb.png" alt="clock">
<picture>
srcset使用区别- 搭配的
src属性- ❶
src和srcset属性, 在支持srcset的用户代理中，当使用 ‘w’ 描述符时，src属性会 被忽略。 - ❷
srcset属性,有src属性,也会被 直接忽略,这个属性只有父元素是
- ❶
- 尺寸 描述符:
- ❶ 必须有:
srcset列表中的 每个字符串 必须 至少有一个 宽度描述符 或像素密度描述符 才有效。(存疑: 有的没有使用 描述符啊,如下面的示例 ↓) - ❷ 可以省略: 而
1x。
- ❶ 必须有:
- 搭配的
- 示例2: 提供多个 可选的图片资源,根据媒体条件 进行选择.
- 嵌套关系
picture > sourcepicture > img
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 800px)">
<source srcset="mdn-logo-medium.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
picture>
- 回退 图像: 对于
- 图片 替代文本: 且
alt属性，以确保 可访问性。 sizes和media的区别media提供 限定的媒体条件sizes能同时提供媒体条件 和 限定的宽度值
1.3 ★ track 为 音频/视频 指定 外部文本 轨道 (搭配 audio,vedio 标签)
-
外部文本 轨道: 如何为 音频和视频 规定 外部文本 轨道 ?
- 使用
文本轨道 标签- 文本轨道 格式:
- ❶ WebVTT格式 (
.vtt文件) — Web Video Text Tracks 网络视频 文本轨道 (常用) - ❷ 定时文本 标记语言 (TTML)
- Timed Text Markup Language
- ❶ WebVTT格式 (
- 音频和视频 的文本文件:
指定 字幕文件 或其他包含文本 的文件，当音频和视频 播放时，这些文本文件是 可见的.
- 文本轨道 格式:
- 使用
-
限定 父元素:音频+视频. HTML
元素 被当作媒体元素和的子元素 来使用。- 用于 字幕:
元素使用,允许 指定 定时字幕（或者 基于时间的数据），例如 自动处理字幕。
- 用于 字幕:
-
数据 类型: 如何指定
标签 给媒体元素 添加的 数据的类型 ?- 在
kind数据种类 属性 中设置 kind数据种类 属性 的属性值:subtitles, captions, descriptions, chapters或metadata。
- 在
-
元素的 属性值 冲突:- 一个媒体元素的 任意两个
子元素: 相同的kind不能有相同的srclang,和label属性。(因为 要区分不同track)比如,几种字幕的 语言类型,不能是同一种.
- 一个媒体元素的 任意两个
-
标签和属性的 浏览器支持- IE 10 以及以上的版本 支持
标签。 
- IE 10 以及以上的版本 支持
1.3.1 track 轨道标签的 属性
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① default | =default | 指定为 默认轨道. 规定 该轨道是 默认的，假如 没有选择 任何轨道。 |
| ② kind | =captions,chapters,descriptions,metadata, subtitles | 文本 数据种类.表示轨道属于什么 文本种类。 |
| ③ label | =label | 轨道的 标签 或标题。 |
| ④ src | =url | 文本轨道文件 地址. 轨道的 资源 URL。 |
| ⑤ srclang | =language_code | 文本轨道 语言. 轨道的语言，若 kind 属性值是"subtitles"，则该属性 必需的。(字幕 必须指明语言) |
⑴ default 属性: 默认 文本轨道 (布尔 属性)
- ⑴
文本轨道标签的default默认文本轨道 属性- 指定 默认文本轨道: 如何规定 应该使用这个轨道，假如用户 没有选择 其他轨道的话 ?
- 使用 文本轨道标签的
default默认属性 - ❶ 默认 启用: track-
default默认属性 指定 该文本轨道 默认为启用. ( 除非 用户首选项 指定了更合适的一个 文本轨道)。 - ❷ 限定 一个: 一个媒体元素,只能设置 一个默认 轨道,
- 就是说, 每个音频 或者视频元素中, 只有一个
文本轨道 能设置default默认属性. - ( 很显然, 设置两个 默认文本轨道,浏览器也不知道 该选哪个,所以不合理.)
- 就是说, 每个音频 或者视频元素中, 只有一个
- 属性值:
default="default"
- 使用 文本轨道标签的
- 指定 默认文本轨道: 如何规定 应该使用这个轨道，假如用户 没有选择 其他轨道的话 ?
- 示例1: 一个
video视频元素，有两个字幕,把英文的字幕 设置 为默认的：- 嵌套关系
vedio > source,source > tracksrc type
- 关联关系
- ❶ 同为 子元素:
, )的 子元素 - ❷ 空标签: 都是 空标签,没有标签内容
- ❸ 先后 顺序: 同时,
需要 放在所有- 先有资源,才有搭配的 文本轨道
- ❶ 同为 子元素:
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subschi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" default="default" src="subseng.srt" srclang="en" label="English">
video>
- 文本轨道 和搜索引擎抓取: 文本轨道 会使网站 更容易 被搜索引擎抓取到 （SEO）
- 由于搜索引擎的 文本 抓取能力 非常强大，使用文本轨道 甚至可以让搜索引擎 通过视频的内容 直接链接。
- SEO:abbr. 搜索引擎 优化（Search Engine Optimization）
⑵ kind 属性: 文本轨道 种类 (枚举 属性)
- ⑵
文本轨道标签的kind种类属性- 文本轨道 种类: 如何规定 文本轨道的种类 ?
- 使用 文本轨道标签的
kind种类属性- 定义了文本轨道 (text track) 什么用途。
- 省略时 默认字幕: 如果省略了 该种类
kind属性，默认的kind文本轨道种类 =subtitles= 字幕 - 无效值时 默认元数据: 如果
kind属性 包含 无效值，它将使用 元数据metadata。(Chrome 52 之前的版本 将无效值作为 字幕subtitle处理。所以,属性值 要写对,避免引起 浏览器兼容问题.)
- 使用 文本轨道标签的
- 文本轨道标签的 track-
kind文本轨道 种类 属性值
- 文本轨道 种类: 如何规定 文本轨道的种类 ?
| 属性值 | 用于 |
|---|---|
| ① captions | ❶ 该轨道定义 将在播放器中显示的 简短 说明。❷ 隐藏式字幕 提供了 音频的转录 甚至是翻译。❸ 可能包含重要的 非言语的信息，比如 音乐提示或者音效。可以指定 提示音的源文件 (e.g. music, text, character). ❹ 适用于 耳朵听不见的用户 或者当调成静音的时候。 |
| ② chapters | ❶ 该轨道定义 导航 章节标题，用于导航 媒介资源。❷ 章节标题 用于 用户浏览媒体资源的时候. |
| ③ descriptions | ❶ 该轨道定义 文本 描述，用于 视频内容的 文本描述。假如内容 不可播放或不可见。 ❷ 视频内容的 文本描述。适用于 盲人 或者当 视频不可见的场景。 |
| ④ metadata | ❶ 该轨道 定义元数据: 脚本 使用的内容。 ❷ 脚本使用的 track 轨道内容。 对用户 不可见。 |
| ⑤ subtitles | ❶ 该轨道定义 字幕，用于在视频中 显示字幕。❷ 字幕给观影者看不懂的内容提供了翻译。比如英文电影里 非英文的对话框或者文字。❸ 字幕可能 包含额外的内容，通常有 附加的背景信息。比如在电影星球大战 开头的文字，或者某个场景的 日期，时间，还有地点。 |
⑶ label 属性: 文本轨道 标题 (用户可见)
- ⑶
文本轨道标签的label文本轨道标题 属性- 文本轨道的 标题 : 如何规定 轨道的标签 ?
- 当用户 选择 文本轨道时，标签 会显示出来。
- 使用
label标签属性 - 用户 可见: 当列出可用的文本轨道 (text tracks) 时，给浏览器 使用的 文本轨道的标题，这种标题是 用户可见的。
- 文本轨道的 标题 : 如何规定 轨道的标签 ?
- 示例1: 定义一个视频,并为它 设置一个 英文字幕
- 嵌套关系:
vedio > track
<html>
<body>
<video controls width="250"
src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.mp4">
<track default kind="captions"
srclang="en"
src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"/>
抱歉，您的浏览器 不支持 嵌入式视频!
video>
body>
html>
- 字幕位置: 字幕会显示在视频的下方
- 开关字幕: 有的浏览器中,会显示 开关字幕 的控件选项
- 示例2: 指定 字幕标题的字幕
<video controls width="250"
src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.mp4">
<track default kind="captions"
srclang="en"
src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt" label="英文字幕" />
抱歉，您的浏览器 不支持 嵌入式视频!
video>
- 定义了 字幕的标题,方便用户切换字幕
⑷ src 属性: 文本轨道 地址 (必需 属性)
- ⑷
文本轨道标签的src资源 属性- 文本轨道 地址: 如何规定 文本轨道的 url,即
track文本轨道的地址 ?- 使用
src资源地址 属性 src资源 属性是 必需的。- 轨道的地址(
.vtt文件)。必须是 有效的URL。 - 与文档 相同来源: 必须指定 此资源地址 属性，并且其 URL值 必须 与文档具有 相同的来源—除非
元素的或父元素 具有crossorigin属性。
- 使用
- 文本轨道 地址: 如何规定 文本轨道的 url,即
⑸ srclang 属性: 文本轨道 语言
-
⑸
文本轨道标签的srclang资源语言 属性- 文本轨道 语言: 如何定义 文本轨道 数据的 语言 ?
- 使用
srclang资源语言 属性
- 使用
srclang资源语言 属性的使用- 字幕 必需 设置语言: 如果
kind="subtitles"，则srclang属性是 必需的。- 字幕 必须指定语言.
- 字幕 必需 设置语言: 如果
srclang资源语言 属性的属性值- language_code
- 双字母的 语言代码，规定轨道的语言。
srclang="language_code"- 它必须是 一个有效的 BCP 47语言标记
- 示例1:一个视频标签,两个可选的资源地址,多个可选的 文本轨道.
- 文本轨道 语言: 如何定义 文本轨道 数据的 语言 ?
<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="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
<track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
<track kind="metadata" src="keyStage1.vtt" srclang="en"
label="Key Stage 1">
<track kind="metadata" src="keyStage2.vtt" srclang="en"
label="Key Stage 2">
<track kind="metadata" src="keyStage3.vtt" srclang="en"
label="Key Stage 3">
...
video>
1.4 ★ video 定义 视频
- 表示 视频: 如何定义 视频 ? 比如 电影片段 或 其他视频流。
- 使用
视频 标签 - ① 嵌入 媒体播放器: 视频元素(
< Video >) 将支持视频播放的 媒体播放器 嵌入到文档中。 - ② 视频元素 也可用于音频: 也可以将
用于 音频内容，但是元素 可能提供 更合适的用户体验。
- 使用
- 视频的调用
- 本地网站内,一般是 不会放视频的,因为视频文件,一般占用空间 都比较大
- 而 我们开发的网站的 空间容量是 有限的.
- 网站的空间容量, 上传到服务器中,是收费的,价格也不低.
- 解决办法: 先把视频软件 上传到 一些 视频网站上,比如 优酷,youtube 等,然后 再调用 这个视频,这样不会占用 网站本身的空间容量.
- 本地网站内,一般是 不会放视频的,因为视频文件,一般占用空间 都比较大
- 回退显示: 标签内容: 如何让 老的浏览器 显示出 不支持 该标签的信息 ?
- 在开始标签 和结束标签之间 放置文本内容.(音频
也是这样操作的)
- 在开始标签 和结束标签之间 放置文本内容.(音频
视频 标签和属性的 浏览器支持- IE 8 以及更早的版本 不支持
标签。 
- IE 8 以及更早的版本 不支持
- 目前，
元素支持 三种视频格式：MP4、WebM、Ogg。
- 三种格式的 音视频 编解码器
- ① MP4 = MPEG 4 文件: 使用 H264 视频编解码器 和 AAC 音频编解码器
- ② WebM = WebM 文件: 使用 VP8 视频编解码器 和 Vorbis 音频编解码器
- 某些 媒体文件类型 允许使用
codecs参数 作为 文件类型字符串 的一部分 来提供更具体的信息 video/webm; codecs="vp8, vorbis"- 意思是,该文件是 一个 WebM视频 使用 VP8的视频和 Vorbis的音频 编解码器。
- 某些 媒体文件类型 允许使用
- ③ Ogg = Ogg 文件: 使用 Theora 视频编解码器 和 Vorbis 音频编解码器
- 视频 处理方法: 一般会 同时提供 这 3 种视频格式(
.ogg .mp4 .webm),用以兼容 各大主流浏览器.
<video controls="controls">
<source src="cartoon.mp4" />
<source src="cartoon.ogg" />
<source src="cartoon.webm" />
video>
- 示例1: 为不支持 视频标签的 老式浏览器. 提供 提示 和获取视频的链接.
标签内的段落: 回退 内容= 文本提示+资源的链接- ❶ 不支持 才显示: 当浏览器不支持
标签的时候，标签的内容 才会显示出来，对旧的浏览器 做一些兼容处理。 - ❷ 回退 资源链接: 提供了一个 指向这个 视频文件的链接，使用户可以 至少访问到这个文件，而不会 局限于 浏览器的支持。
- ❶ 不支持 才显示: 当浏览器不支持
<video src="rabbit320.webm" controls>
<p>你的浏览器 不支持 HTML5 视频。 这是 <a href="rabbit320.webm">获取视频的链接a> .p>
video>
- 示例2: 为视频 提供多个资源地址,设置 指定的海报.
<video width="620" controls
poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4" />
<source
src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
type="video/ogg" />
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi" />
你的浏览器不支持 HTML5 视频标签。
video>
1.4.1 video 视频标签的 属性
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① autoplay | =autoplay | 布尔 属性. ❶ 如果出现该属性，则视频在 自动播放(就绪后马上播放)。 ❷ 会使音频和视频内容 立即播放，即使页面的其他部分 还没有加载完全。❸ 建议 不要应用这个属性 在网站上，因为用户们 会比较反感 自动播放的媒体文件。❹ 要禁用 视频自动播放，autoplay="false"将不起作用;如果属性在muted属性，自动播放将无法工作。 |
| ② controls | = controls | 如果出现该属性，则向用户 显示控件，浏览器将提供控件 以允许用户 控制视频播放，包括 音量、搜索和 暂停/恢复播放。 |
| ③ height | =pixels | 视频 显示区域的 高度，单位为 CSS像素( 仅限 绝对值;没有 百分比。) |
| ④ loop | =loop | 如果出现该属性，则循环播放(当媒介文件完成播放后 再次开始播放)。 |
| ⑤ muted | = muted | 规定 视频的音频输出 应该被 静音,播放时 没声音。它的默认值是false，这意味着 在播放视频时 将有声音。 |
| ⑥ poster | =URL | 规定视频的海报, 下载时 显示的 图像，或者在用户点击 播放前 显示的 图像。 |
| ⑦ preload | =none,metadata,auto,空字符串 | 枚举 属性.预加载 方式. 视频 加载方式。冲突属性: 如果使用"autoplay"，则忽略该属性。 |
| ⑧ src | =url | 视频地址. 要播放的 视频的 URL。这是可选的;可以在视频中 使用 |
| ⑨ width | =pixels | 视频 显示区域的 宽度，单位为 CSS像素(仅限 绝对值;没有 百分比)。 |
| ⑩ buffered | 要检索的时间范围 | 缓冲资源的 时间范围: 可以读取的属性，以确定 缓冲媒体的 时间范围。该属性 包含一个 TimeRanges 对象。跟踪供 |
- 示例1: 指定 高度和宽度 ,设置为 自动播放的 视频 :
<video controls="controls" autoplay="autoplay" width="300" height="200">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
您的浏览器 不支持 视频标签.
video>
- 通过指定
width,height宽高属性,改变 视频的宽高
⑴ height 属性和 width 属性: 高度和宽度
-
⑴
视频标签的height高度 属性和width宽度属性- 视频 高度和宽度: 如何指定 视频播放器的 高度和宽度 ?
- 使用 视频标签的
height高度属性和width宽度属性
- 使用 视频标签的
- 设置 视频宽高的 必要性
- ① 预留 空间: 为什么要规定 视频的宽度和高度 ?
- 如果设置 高度和宽度,
- 在页面加载时 会为视频 预留出空间。
- 如果设置 高度和宽度,
- ② 布局 变化:如果 没有设置 这些属性
- 浏览器就 无法预先确定 视频的尺寸，这样就无法为视频 保留合适的空间. 在页面加载的过程中，布局 也会产生变化。
- 需要预留空间 标签: 图片和视频. 这点和
- ① 预留 空间: 为什么要规定 视频的宽度和高度 ?
- 宽高 和视频缩小
- 可以通过
height高度 和width宽度属性来 缩小视频吗 ?- 不可以
- 为什么 不可以 ?
- ❶ 依然 占用 大资源: 通过
height和width属性来 缩小视频，也会迫使用户 下载原始的视频（即使在页面上 它看起来较小,还是会下载 很大的资源）。 - ❷ 视频 压缩: 缩放视频的正确的方法是: 在网页上使用该视频前，使用软件对 视频进行压缩。
- △ 不要通过宽高 缩小资源尺寸: 对于
- ❶ 依然 占用 大资源: 通过
- 可以通过
视频标签的height和width宽高的 属性值- pixels
- 以像素计的 高度值（比如 “100px” 或 100）。
- 默认单位: 像素
- 限制 单位: 视频 显示区域的高度和宽度，单位为 CSS像素( 仅限 绝对值;没有 百分比)。
- 视频的宽高 为什么 不可设置成 百分比的值?
- 视频 高度和宽度: 如何指定 视频播放器的 高度和宽度 ?
-
保持 长宽比: 为了保持 长宽比,只修改 宽或高,另一个也会随着增大和减小一部分,之后保持不变,被修改的部分,用背景色填充
- 可以用 CSS 来控制视频的宽高 尺寸。 无论使用哪种方式，视频都会保持 它原始的长宽比 — 也叫做 纵横比。
- 如果 设置的尺寸 没有保持 视频原始长宽比，那么视频边框 将会拉伸，而未被视频内容填充的部分，将会显示 默认的背景颜色.(360浏览器 默认白色)
-
长宽比 不变: 保持高度不变,把视频的宽,从100,200,300,…600,一开始 视频的高随着增大了一部分,后来宽高都不变了,只在宽的左右 添加背景色 白色(从控件的宽 越来越长,可以看出宽在不断变大)
- 长宽比不变 = 保证了 视频画面不变形
⑵ poster 属性: 海报 图像地址 (下载或播放前 显示)
-
⑵
视频标签的poster海报 属性- 下载或播放前 显示的图像: 如何规定 视频 下载时 显示的图像，或者在用户点击 播放前 显示的图片 ?
- 使用 视频标签的
poster海报 属性
- 使用 视频标签的
- 默认海报: 第一帧: 如果没有设置
poster海报属性- 则使用 视频的 第一帧 来代替。
- 视频标签的
poster海报属性值- 图像地址: URL
- 规定 图像文件的 URL。
poster="url"
- 下载或播放前 显示的图像: 如何规定 视频 下载时 显示的图像，或者在用户点击 播放前 显示的图片 ?
- 示例1: 带有 预览图（海报图片）的视频播放器：
<video controls poster="/images/w3school.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 视频标签。
video>
⑶ preload 属性: 预加载方式 (枚举 属性)
- ⑶
视频标签的preload预加载 属性- 枚举属性
- 用处: 旨在 告诉浏览器 作者认为 什么加载方式 可以达到最佳的用户体验。
- 缓冲 文件: 被用来 缓冲较大的文件
- video-
preload预加载属性 的属性值- ① 不 预加载:
none不缓冲- 提示 认为用户 不需要查看该视频
- 服务器也想要 最小化访问流量；
- 提示浏览器 该视频 不需要缓存。
- ② 预加载 元数据:
metadata仅缓冲 文件的元数据- 提示 尽管作者认为用户 不需要查看 该视频，不过 抓取元数据（比如：长度）还是很合理的。
- ③ 预加载 整个文件:
auto页面加载后 缓存媒体文件.- 用户 需要这个视频 优先加载；
- 提示 如果需要的话，可以 下载整个视频，即使 用户并不一定会用它。
- ④ 空字符串
"": 等同auto,加载 整个文件 - ⑤ 各个浏览器 默认值: 假如不设置，默认= 是浏览器定义的（即，不同浏览器 会选择 自己的默认值），即使规范 建议设置为
metadata。所以最好还是设置下,避免浏览器兼容问题?
- ① 不 预加载:
- 冲突 属性: 优先级. 自动播放
autoplay属性 优先于 预加载preload。如果指定了 自动播放，浏览器显然需要 开始下载视频 进行播放。 - 提示: 规范没有强制 浏览器遵循 该属性的值;这只是个提示。
- 枚举属性
1.4.2 支持不同浏览器: 设置多种格式
-
多格式支持
- 不同浏览器,不同视频格式支持: 以上的例子中有一个问题， Safari 或者 Internet Explorer 这些浏览器 来访问上面的链接。视频并不会播放，这是因为 不同的浏览器 对视频格式的支持不同。
-
容器 格式: 像 MP3、MP4、WebM 这些术语叫做 容器格式。
- 不同 容器格式,不同 播放方式: 它们是 用不同的方式 来播放音频 或者视频的 — 因为, 这些容器 是用不同的音频轨道、视频轨道、元数据 来呈现媒体文件的。
-
视频和音频 不同的格式
- 视频格式
- ① WebM 容器
- 通常包括了 Ogg
Vorbis音频和VP8/VP9视频。 - 主要在 FireFox 和 Chrome 当中支持。
- 通常包括了 Ogg
- ② MP4 容器
- 通常包括
AAC以及MP3音频和H.264视频。 - 主要在 Internet Explorer 和 Safari 当中支持。
- 通常包括
- ③ 老式的 Ogg 容器
- 往往支持 Ogg
Vorbis音频和 OggTheora视频。 - 主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代。
- 往往支持 Ogg
- ① WebM 容器
- 音频格式:不需要 容器
- 音频播放器 将会直接播放 音频文件，例如 MP3 和 Ogg 文件。这些不需要容器。
- 音频和视频的 编码兼容表
- 视频格式
-
格式,浏览器 和编解码器
- 格式的用途: = 压缩 音频和视频.
- 主要用于 将音频和视频 压缩成 可管理的文件（原始的音频和视频文件 非常大）。
- 不同浏览器,不同 编解码器:
- 浏览器包含了不同的
Codecs(n. 多媒体 数字信号 编解码器), 如Vorbis和H.264(这两个 都是编解码器,对应 不同的音视频格式)
- 浏览器包含了不同的
- 转化成 二进制:
Codecs(n. 多媒体 数字信号 编解码器) 用途 = 它们用来 将已压缩的音频和视频 转化成二进制数字。
- 格式的用途: = 压缩 音频和视频.
-
格式的 浏览器兼容:
- 不同浏览器,不同编解码器,要使用不同的音视频格式: 浏览器 并不 全支持相同的
codecs，所以 得使用 几个不同格式的文件 来兼容不同的浏览器。 - 使用的格式 都得不到浏览器的支持，那么媒体文件 将不会播放。
- 浏览器格式和专利问题:
- MP3 (音频格式) 和 MP4/H.264 (视频格式) , 浏览器若想要 支持这些格式，就得支付高额的费用。此外，许多人 反对软件技术垄断，支持开放的格式。这就是为什么 我们需要准备不同的格式 来兼容不同的浏览器。
- 浏览器格式和专利问题:
- 不同浏览器,不同编解码器,要使用不同的音视频格式: 浏览器 并不 全支持相同的
-
兼容浏览器: = 设置 多种音视频格式
- 音频和视频格式 > 压缩 音频和视频 > (浏览器的编解码器
Vorbis和H.264) > 二进制 - 不同音视频格式 > 不同的编解码器 >支持 不同的浏览器
- HTML 媒体格式支持
- 音频和视频格式 > 压缩 音频和视频 > (浏览器的编解码器
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接a>观看p>
video>
-
添加 音频和视频资源的方法
- ① 直接通过
音频和视频 标签的 audio,video-src资源地址 属性,添加资源 - ② 通过子元素
src添加 音频和视频资源- 浏览器将会检查
codec(多媒体 数字信号 编解码器) 相匹配的媒体。 - 视频 应当包含格式:
WebM和MP4两种格式，这两种 在目前已经 足够支持大多数平台和浏览器。
- 浏览器将会检查
- ① 直接通过
-
source-
type属性的使用: 浏览器 快速找到支持的格式, 节省时间和资源- 这个属性是可选的，但是 建议添加上 这个属性
- 指明了 视频文件的 MIME types (与文件名扩展名 相同。该名称 源于最初在电子邮件中使用的 MIME标准。)
- MIME 类型列表
- 浏览器 跳过 不支持格式,: 同时 浏览器 会通过 检查这个属性 来迅速的跳过 那些 不支持的格式。
- 加载每一个文件:
- 如果没有添加 source-
type属性，浏览器会 尝试加载每一个文件 - 直到 找到一个 能正确播放的格式，这样会 消耗掉大量的 时间和资源。
- 所以 ,建议 使用类型
type指明文件的类型,节省时间.
- 如果没有添加 source-
- 加载每一个文件:
- 指明了 视频文件的 MIME types (与文件名扩展名 相同。该名称 源于最初在电子邮件中使用的 MIME标准。)
- 这个属性是可选的，但是 建议添加上 这个属性
结束语
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 参考文档
- W3School 教程
- MDN HTML 教程
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/89425521
- 版权声明：本文为博主原创文章，转载请附上博文链接！
