【音频和视频标签】

最新推荐文章于 2024-05-13 02:27:11 发布

Hey_Coder

最新推荐文章于 2024-05-13 02:27:11 发布

阅读量6k

点赞数 3

分类专栏：【HTML】文章标签： audio标签 video标签 track标签音视频标签音频和视频格式

本文链接：https://blog.csdn.net/VickyTsai/article/details/89425521

版权

【HTML】专栏收录该内容

26 篇文章 10 订阅

订阅专栏

音频和视频标签

1. html5中的音频/视频标签
结束语

1. html5中的音频/视频标签

标签名	用于
① `<audio>`	定义音频内容。
② `<source>`	定义媒体资源地址。
③ `<track>`	定义用在媒体播放器中的文本轨道。
④ `<video>`	定义视频内容。

1.1 ★ audio 定义音频

音频内容: 如何定义音频 ? 比如音乐或其他音频流。
- 使用<audio> 音频标签
- 美 /ˈɔːdioʊ/
  - 元素用于在文档中表示音频内容。
多个音频资源: <audio> 元素可以包含多个音频资源
- 资源地址: 这些音频资源可以使用 audio-src 属性或者<source>资源标签来进行描述: 浏览器将会选择最合适的一个来使用。

当前音频 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 种音频格式中,会有一个被支持的.

回退显示标签内容: <audio>声音标签的使用
- 老的浏览器不支持<audio>声音标签,如何处理?
  - 在开始标签和结束标签之间放置文本内容,进行提示.
  - 对于不支持<audio>元素的浏览器，会显示 <audio>的标签内容,作为回退显示, 支持的话,就不会显示标签内容了.
<audio>音频标签和属性的 浏览器支持
- IE 8 以及更早的版本不支持 <audio> 标签。

1.1.1 audio 音频标签的 HTML5 中的新属性

属性名	属性值	用于
① src	=url	要播放的音频的 URL。
② autoplay	=autoplay	如果出现该属性，则音频在就绪后马上播放(自动播放)。
③ controls	=controls	如果出现该属性，则向用户显示控件，比如播放按钮。
④ loop	=loop	循环播放,如果出现该属性，则每当音频结束时重新开始播放。
⑤ muted	= muted	规定视频输出应该被静音。
⑥ preload	=preload	如果出现该属性，则音频预加载 (在页面加载后进行加载)，并预备播放。如果使用 “autoplay”，则忽略该属性。
⑥ crossorigin	anonymous,use-credentials	跨源请求.搭配 `<canvas>`画图标签.

<audio src="someaudio.wav">
	您的浏览器不支持 <code>audio</code> 标签。
</audio>

⑴ autoplay 属性: 自动播放 (布尔属性)

⑴ <audio>声音标签的autoplay自动播放属性
- 自动播放: 如何规定一旦音频就绪马上开始播放 ?
  - 使用声音标签的 autoplay自动播放属性
  - 一个布尔属性
  - 不等整个文件下载完成: 如果指定，音频将自动开始播放，而不是等待整个音频文件完成下载。
  - 避免使用:
    - ❶ 用户体验差: 自动播放音频( 或带有音频轨道的视频)的网站可能会给用户带来不愉快的体验，所以应该尽可能避免。没有预料下, 网页突然发出响声,确实让人感觉不好.
    - ❷ 用户启用: 如果你必须提供自动播放功能，你应该要求用户明确地启用它.
- 将声音设置为自动播放：
  - autoplay="autoplay"

⑵ controls 属性: 播放控件 (布尔属性)

⑵ <audio>声音标签的controls播放控件属性
- 播放控件: 如何规定浏览器应该为音频提供播放控件 ?
  - 使用声音标签的 controls 控件属性
  - 如果设置了该属性，则规定不存在作者设置的脚本控件。
- 浏览器播放控件 一般包括哪些：
  - ❶ 播放
  - ❷ 暂停
  - ❸ 定位 (用鼠标指定到某位置)
  - ❹ 音量
  - ❺ 全屏切换 (如果可用)
  - ❻ 字幕（如果可用）
  - ❼ 音轨（如果可用）
  - ❽ 下载
- controls播放控件属性值
  - 布尔属性
  - controls="controls"

示例1: 设置一段有控件,自动播放的声音
嵌套关系
- <audio> controls autoplay
  - <source> src type

<!DOCTYPE HTML>
<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中,不包含下载选项,如下
自动播放: 设置了autoplay自动播放,网页加载后就自动播放音乐,没有设置,声音就是不播放的,静音的.
- 自动播放次数: 默认1次,播放完一次,就停止播放了

⑶ loop 属性: 循环播放 (布尔属性)

⑶ <audio>声音标签的loop 循环播放属性
- 循环播放: 如何规定当音频结束后将重新开始播放 (循环播放) ?
  - 使用声音标签的 loop循环播放属性
- 循环播放loop属性值
  - 布尔属性
  - loop="loop"
- 带有浏览器默认控件和循环播放的<audio>声音资源：

<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 属性: 静音 (布尔属性)

⑷ <audio>声音标签的 muted静音属性
- 默认静音: 如被设置，则规定声音应该被静音。
  - 一个布尔属性，指示音频最初是否被消音。
  - 默认值: false。默认不静音的意思.
  - 播放无声音: 设置了这个属性,点击播放按钮,不会有声音,因为默认是没音量,静音的,要自己加音量,或者取消静音.
- 不允许简写: muted 静音属性,HTML 与 XHTML 之间的差异
  - 在 XHTML 中，不允许属性简写，muted属性必须定义为 <audio muted="muted">。
- 声音标签的muted 静音属性的浏览器支持
  - IE 9 以及更早的版本不支持 muted 属性。

把音频设置为静音：

<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 属性: 预加载方式 (枚举属性)

⑸ <audio>声音标签的preload预加载属性
音频预加载方式: 如何规定是否在页面加载后载入音频 ?
- audio-preload枚举属性，
- 提示浏览器使用何种加载方式以达到最好的用户体验
  - 不强制仅提示: 浏览器不会被规范强制去遵循此属性的值;这只是个提示。
矛盾属性: 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 标签替代)

⑹ <audio>声音标签的src资源属性
- 音频地址: 如何指定要播放的 音频的 URL ?
  - 使用 src 资源属性
- 替代标签
  - 可以使用 <source> 资源标签来设置音频。

<!DOCTYPE HTML>
<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>音频标签的 audio-src资源属性,添加资源
- ② 通过子元素<source> 资源标签的 source-src 添加音频资源

⑺ crossorigin 属性: 跨源请求 (搭配 canvas 标签)

⑺ <audio>声音标签的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-Origin HTTP头部），图像会被污染 , 而且它的使用会被限制。
  - ② 有证书跨域请求: use-credentials
    - 美 /krəˈdenʃlz/
    - 执行一个跨域请求（比如，有 Origin: HTTP header）.同时发送证书.
    - （比如，有 cookie, 证书 a certificate, 有 HTTP 基本的授权认证）。
    - 给源站发送证书: 通过 Access-Control-Allow-Credentials HTTP header
  - ③ 未设置属性: 如果属性不存在，则在没有CORS请求的情况下获取资源.
    - 当用户并未显式使用本属性时，默认不使用 CORS 发起请求,默认不跨源访问.
    - (例如，不会向服务器发送 OriginHTTP 头部信息)
    - 用以防止资源在<canvas>中不受污染的使用。对资源也算是种保护.
  - ④ 无效值, 默认无证书跨域请求: 如果是无效值，默认使用anonymous无证书跨域请求属性值。
<audio>,<canvas>的搭配使用: 音频可视化

1.1.2 audio 使用说明

⑴ 多个音频源: 因为不同的浏览器有时候会支持不同的文件类型和音频编解码器,所以需要多个音频源,用来给浏览器选择.
- 多个音频源+搭配标签: 可以在子元素<source>资源标签中提供多个音频源，然后浏览器将使用所理解的第一个源.
⑵ 播放控件
- ❶ 浏览器默认播放控件: 如果不指定controls属性，则音频播放器将不包含浏览器的默认控件。
- ❷ 自定义控件: 但是，可以使用 JavaScript 和 HTMLMediaElement API 创建自己的自定义控件。

⑶ 监控音频 (媒体事件): 为了对音频内容进行精确控制，HTMLMediaElements 会触发许多不同的媒体事件。
- 这提供了一种方法来 监控音频 的获取过程，可以观察错误或检测什么时候开始播放或操作它。
⑷ 生成和操作音频 (音频 API): 可以使用 Web Audio API 直接从 JavaScript 代码 生成和操作音频.
⑸ 字幕: 音频不能直接有字幕. <audio>音频元素不能直接像<video>视频元素那样有字幕。(设置音频字幕,方法见下方内容.)

⑹ 音频控件: 必须指定controls控件属性，否则<audio>音频元素本身没有固有的可视输出，在这种情况下，将显示 浏览器的默认控件。
- ① 设置默认控件显示
  - ❶ 默认行内元素: 默认控件的显示值默认为行内元素 display:inline
  - ❷ 建议设置块元素: 一般设置为块元素 display:block , 可以改进 定位和布局 方面的控制，除非是位于文本块内或类似的位置,不用设置为块元素。
- ② 设置默认控件样式: 可以用影响块的属性来设置默认控件的样式，例如,可以给它一个边框、边框半径、内边距、外边距 ( border ,border-radius, padding, margin ,etc.)等等。
  - ❶ 不能改变单个组件样式: 然而，不能在音频播放器中设置单个组件的样式(例如, 改变按钮大小或图标，改变字体等)，而且不同浏览器的控件是不同的。
  - ❷ 跨浏览器的一致外观: 要获得跨浏览器的一致外观，需要创建 自定义控件;可以按照希望对它们进行标记和样式化，然后可以使用 JavaScript 和HTMLMediaElement API 来连接它们的功能。

⑺ 音频的访问性问题
- ① 对话音频(需要字幕): 语音对话音频文件, 应该提供准确描述其内容的字幕和文字记录。
  - 字幕用处: 这是为了当用户听不清时,依然可以 理解音频的含义.
  - 自动字幕: 如果使用自动字幕服务，重要的是要 检查生成的内容，以确保它准确地表示源音频。
  - 指定字幕 : 使用 WebVTT 指定字幕.
    - WebVTT
      - Web Video Text Tracks Format :网络视频文本跟踪格式
        显示文本: 一种使用<track>元素显示定时文本轨道（如字幕或标题）的格式。
        WebVTT 文件的 MIME 类型: text/vtt。
        一个 WebVTT 文件（.vtt）包含: 任意条带时间的提示性文本.
      - Ⅰ.添加文本到视频: 主要用途是将文本添加到<video>。不是添加到音频<audio>,所以音频无法直接使用.
      - Ⅱ. △ 添加文本到音频
        ❶ 必须找到一个 库或框架 来提供这个功能，或者自己编写代码来显示标题/ 字幕。
        ❷ 使用<video> 视频元素播放音频，该元素支持 WebVTT。
      - WebVTT 是一种基于文本的格式，必须使用UTF-8进行编码。
  - 字幕的信息:
    - ❶ 关键的音乐和声音: 在WebVTT 文件中, 除了对话的字幕外，也应该用文字表明传达重要信息的 音乐和声音效果。包括 情绪和语气。
    - ❷ (从文字上) 传递音频感情: 以向观众提供基调和情感上的洞察力, 可以帮助听者建立情绪.
- ② 回退显示: 给<audio> 设置标签内容, 为使用不支持<audio>元素的浏览器提供一些内容(如, 直接下载链接).
点击查看: 更多初学者教程

示例1: 有两个音频源的音频文件
嵌套关系
- audio > source*2
- audio > 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 标签)

⑴ 可选的多个资源: <source>资源标签为媒体元素（比如 <video> 和 <audio>,<picture>）
- 为音频标签和视频标签 ,多选图片标签添加(提供) 多个资源
- 空标签: 没有标签内容
⑵ 搭配标签: <video> 和 <audio>,<picture>,提供多个音频资源,多个视频资源,多个图片资源.
⑶ 选择资源: 如何规定 可选择的视频/音频文件?
- 让浏览器根据对媒体条件,资源类型等进行选择资源
- 使用 <source>资源标签
- 用于: 当不同浏览器支持的不同媒体文件格式时, 提供多个可选的资源,让浏览器根据需要选择资源.
⑷ <source>标签和属性的浏览器支持
- IE8 以及更早的版本不支持 <source> 资源标签。

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 标签)

⑴ <source>资源标签的media 匹配媒体/设备属性
- 匹配的媒体/设备
  - 规定资源文件要匹配 何种媒体/设备
    - 判断支持: 浏览器可使用媒体匹配提交, 来判断自己是否能播放这个文件。如果不能播放，则可以选择不进行下载。
  - 限定使用: 只在<picture>可选中图片元素中使用.(为什么音频文件和视频文件不能用?还没实现支持?)
- 匹配媒体/设备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 标签)

⑵ <source>资源标签的src资源属性
- 如何规定媒体文件的 URL ?
  - 使用 src资源属性
  - 必需对于<audio>和<vedio>是必需属性，当<source>作为音频视频的子元素时,必须要设置 src 媒体资源地址。
  - 被忽略: 当<source>元素放在<picture>元素中时，该资源地址 src属性的值将被忽略。(使用的是 srcset提供的资源地址)

⑶ type 属性: 资源类型

⑶ <source>资源标签的type类型属性
- 资源类型: 规定媒体资源的 MIME 类型 ?
  - 使用资源标签的 type 类型属性
- type 类型属性的语法
  - <source type="MIME_type">
- type 类型属性的属性值
  - MIME_type (也称为 media type 媒体类型)
  - 规定媒体资源的 MIME 类型。
- 常用的 MIME 类型有哪些 ?
  - ① 用于视频：
    - video/ogg
    - video/mp4
    - video/webm
  - ② 用于音频：
    - audio/ogg
    - audio/mpeg
获取完整的标准 MIME 类型列表
source-type属性的指定和查询服务器
- 没指定类型,会查询服务器: 如果没有指定type类型属性，则从服务器检索媒体的类型并检查内核是否能够处理它;
  - 如果不能呈现，则检查下一个<source>。
- 指定了类型,不查询服务器:
  - 类型比较: 如果指定了type属性，则将其与内核可以使用的类型进行比较
  - 如果不能识别该属性，甚至不会查询服务器;会立即检查下一个<source>元素。
- 节省时间: 所以指定 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 属性)

<source>资源地址标签的 sizes 图像大小
使用前提:
- ❶ 限定父元素是<picture>: size属性只有在 <source>元素是<picture>元素的直接子元素时才有效。
- ❷ 音频/视频无用: 就是说资源标签<source>的这个能限定媒体条件, 还能提供多个大小尺寸的 sizes 属性,仅对多图片选择的<picture>标签有用,仅用于图片,音频和视频目前不用这个属性.
- sizes 属性值: (以逗号隔开的) 一个或多个 字符串。
- (一个或多个) 图片大小: 表示资源大小
  - sizes="(min-width: 600px) 200px, 50vw"
    - (当匹配了媒体条件 min-width: 600px 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。)
  - 每一个 资源(图片)大小 包括：= 媒体条件+宽度值 +(,不满足时宽度值)
    - ① 媒体条件: 一个媒体条件。
      - 针对特定设备: 添加自 CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
        媒体条件: 描述用户代理、输出设备或环境的特定特性。
        媒体特性表达式测试它们的存在或值，并且完全是可选的。
        每个媒体特性表达式: 必须用 括号括起来
    - ② 宽度值: 一个资源宽度的值。
      - 预期尺寸: 资源宽度的值 , 被用来指定图像的预期宽度。
      - 不满足媒体条件时尺寸值: 列表最后一项的尺寸值,是不满足这个条件时才应用的。
- 选择图像(地址):
  - 搭配属性: 当srcset使用 ‘w’ 宽度描述符时，用户代理根据当前图像宽度来选择srcset中合适的一个图像URL。
    - ❶ 确定图像: 在布局页面之前，浏览器将使用这些信息来确定在srcset中定义要使用的图像。
    - ❷ 仅限 w宽度尺寸描述符: 请注意，只有在提供srcset w宽度尺寸描述符而不是像素比值(例如，200w而不是2x)时，大小才会产生影响。
  - 图片显示大小: 被选中的尺寸, 决定图像的显示大小（如果没有 CSS样式被应用的话）。
- 使用条件:
  - 搭配属性: 必须搭配srcset属性.
    - 如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。限定媒体条件的图像尺寸大小,是在有多个可带尺寸的图像地址srcset存在时才有效,因为这样才能匹配,
  - 反之,多个(可带尺寸的)图像地址srcset 则不一定要搭配 sizes属性,比如只设置一个地址没有指明尺寸的图像地址srcset属性,可以仅作为资源地址使用.

⑸ srcset 属性: (可带尺寸描述符的) 多选图像地址

<source>图片标签的 srcset 多选图像地址
- 使用前提:
  - 限定父元素是<picture>: srcset属性只有在 <source>元素是<picture>元素的直接子元素时才有效。父元素是音频/视频时无效.
- 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属性
  - ❶ <img>图片中: 可以同时设置 src 和srcset属性, 在支持 srcset 的用户代理中，当使用 ‘w’ 描述符时，src 属性会被忽略。
  - ❷ <source>资源中: 只设置srcset属性,有src属性,也会被直接忽略,这个属性只有父元素是<picture多选图片标签时,才有效.
- 尺寸描述符:
  - ❶ 必须有: <source>标签 srcset列表中的每个字符串必须至少有一个宽度描述符或像素密度描述符才有效。(存疑: 有的没有使用描述符啊,如下面的示例 ↓)
  - ❷ 可以省略: 而<img>可以不设置尺寸描述符, 如果没有指定源描述符，那它会被指定为默认的 1x。

示例2: 提供多个可选的图片资源,根据媒体条件进行选择.
嵌套关系
- picture > source
- picture > 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>

回退图像: 对于<picture>元素，必须始终包含一个<img>回退图像.
图片替代文本: 且<img>必须设置一个alt属性，以确保可访问性。
sizes和media的区别
- media提供限定的媒体条件
- sizes 能同时提供媒体条件和限定的宽度值

1.3 ★ track 为音频/视频指定外部文本轨道 (搭配 audio,vedio 标签)

外部文本轨道: 如何为音频和视频规定 外部文本轨道 ?
- 使用 <track>文本轨道标签
  - 文本轨道格式:
    - ❶ WebVTT格式 (.vtt文件) — Web Video Text Tracks 网络视频文本轨道 (常用)
    - ❷ 定时文本标记语言 (TTML)
      - Timed Text Markup Language
  - 音频和视频的文本文件: <track> 指定 字幕文件 或其他包含文本的文件，当音频和视频播放时，这些文本文件是可见的.
限定父元素:音频+视频. HTML <track> 元素被当作媒体元素 <audio> 和 <video>的子元素来使用。
- 用于字幕: <track> 元素使用,允许指定定时字幕（或者基于时间的数据），例如自动处理字幕。
数据类型: 如何指定 <track> 标签给媒体元素添加的数据的类型 ?
- 在 kind 数据种类属性中设置
- kind 数据种类属性的属性值:
  - subtitles, captions, descriptions, chapters 或 metadata。
<track> 元素的 属性值冲突:
- 一个媒体元素的任意两个 <track> 子元素: 相同的 kind 不能有相同的srclang, 和 label属性。(因为要区分不同 track)比如,几种字幕的语言类型,不能是同一种.
<track>标签和属性的浏览器支持
- IE 10 以及以上的版本支持 <track> 标签。

1.3.1 track 轨道标签的属性

属性名	属性值	用于
① default	=default	指定为默认轨道. 规定该轨道是默认的，假如没有选择任何轨道。
② kind	=captions,chapters,descriptions,metadata, subtitles	文本数据种类.表示轨道属于什么文本种类。
③ label	=label	轨道的标签或标题。
④ src	=url	文本轨道文件地址. 轨道的资源 URL。
⑤ srclang	=language_code	文本轨道语言. 轨道的语言，若 `kind` 属性值是`"subtitles"`，则该属性必需的。(字幕必须指明语言)

⑴ default 属性: 默认文本轨道 (布尔属性)

⑴ <track>文本轨道标签的default默认文本轨道属性
- 指定默认文本轨道: 如何规定应该使用这个轨道，假如用户没有选择其他轨道的话 ?
  - 使用文本轨道标签的 default 默认属性
  - ❶ 默认启用: track-default 默认属性指定该 <track> 文本轨道默认为启用. ( 除非用户首选项指定了更合适的一个文本轨道)。
  - ❷ 限定一个: 一个媒体元素,只能设置一个默认轨道,
    - 就是说, 每个音频或者视频元素中, 只有一个<track> 文本轨道能设置 default默认属性.
    - ( 很显然, 设置两个默认文本轨道,浏览器也不知道该选哪个,所以不合理.)
  - 属性值: default="default"

示例1: 一个 video 视频元素，有两个字幕,把英文的字幕设置为默认的：
- 嵌套关系
- vedio > source , source > track
  - <video> width height controls
    - <source> src type
    - <track> kind src default srclang label
- 关联关系
  - ❶ 同为子元素: <source>,<track> 都可以作为音频和视频(<video>,<audio>)的子元素
  - ❷ 空标签: 都是空标签,没有标签内容
  - ❸ 先后顺序: 同时,<track>需要放在所有 <source> 标签之后
    - 先有资源,才有搭配的文本轨道

<!-- 1个视频 元素 -->
<video width="320" height="240" controls="controls">
	  <!-- 2个格式的视频源 -->
	  <source src="forrest_gump.mp4" type="video/mp4" /> <!-- mp4格式的视频 -->
	  <source src="forrest_gump.ogg" type="video/ogg" /> <!-- ogg格式的视频 -->

	  <!-- 2种语言的字幕 -->
	  <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 属性: 文本轨道种类 (枚举属性)

⑵ <track>文本轨道标签的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 属性: 文本轨道标题 (用户可见)

⑶ <track>文本轨道标签的label 文本轨道标题属性
- 文本轨道的标题 : 如何规定轨道的标签 ?
  - 当用户选择文本轨道时，标签会显示出来。
  - 使用 label 标签属性
  - 用户可见: 当列出可用的文本轨道 (text tracks) 时，给浏览器使用的文本轨道的标题，这种标题是 用户可见的。
示例1: 定义一个视频,并为它设置一个英文字幕
嵌套关系: vedio > track
<video> controls src
- <track> src kind srclang default

<!DOCTYPE html>
<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 属性: 文本轨道地址 (必需属性)

⑷ <track>文本轨道标签的 src资源属性
- 文本轨道地址: 如何规定文本轨道的 url,即 track 文本轨道的地址 ?
  - 使用 src 资源地址属性
  - src 资源属性是必需的。
  - 轨道的地址(.vtt 文件)。必须是有效的URL。
  - 与文档相同来源: 必须指定此资源地址属性，并且其 URL值必须与文档具有相同的来源—除非 <track>元素的<audio>或<video>父元素具有crossorigin属性。

⑸ srclang 属性: 文本轨道语言

⑸ <track>文本轨道标签的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">
   <!-- Fallback -->
   ...
</video>

1.4 ★ video 定义视频

表示视频: 如何定义视频 ? 比如电影片段或其他视频流。
- 使用 <video> 视频标签
- ① 嵌入媒体播放器: 视频元素(< Video >) 将支持视频播放的媒体播放器嵌入到文档中。
- ② 视频元素也可用于音频: 也可以将<video>用于音频内容，但是<audio>元素可能提供更合适的用户体验。

视频的调用
- 本地网站内,一般是不会放视频的,因为视频文件,一般占用空间都比较大
  - 而我们开发的网站的空间容量是有限的.
  - 网站的空间容量, 上传到服务器中,是收费的,价格也不低.
- 解决办法: 先把视频软件 上传到 一些 视频网站上,比如优酷,youtube 等,然后 再调用 这个视频,这样不会占用网站本身的空间容量.

回退显示: 标签内容: 如何让老的浏览器显示出不支持该标签的信息 ?
- 在开始标签和结束标签之间放置文本内容.(音频<audio>也是这样操作的)
<video> 视频标签和属性的浏览器支持
- IE 8 以及更早的版本不支持 <video> 标签。
目前，<video>元素支持三种视频格式：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">
	
	<!-- 视频支持 ogg mp4 webm 三种格式 -->
	<!-- 通过 source 标签,提供 多种格式 -->
	<source src="cartoon.mp4" />
	<source src="cartoon.ogg" />
	<source src="cartoon.webm" />

</video>

示例1: 为不支持视频标签的老式浏览器. 提供提示和获取视频的链接.
<video> 标签内的段落: 回退内容= 文本提示+资源的链接
- ❶ 不支持才显示: 当浏览器不支持 <video> 标签的时候，标签的内容才会显示出来，对旧的浏览器做一些兼容处理。
- ❷ 回退资源链接: 提供了一个指向这个视频文件的链接，使用户可以至少访问到这个文件，而不会局限于浏览器的支持。

    <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"`将不起作用;如果属性在`<video>`标签中，视频将自动播放。要删除自动播放，需要完全删除该属性。❺ 搭配属性: 在某些浏览器中(如 Chrome 70.0)，如果没有静音`muted`属性，自动播放将无法工作。
② controls	= controls	如果出现该属性，则向用户显示控件，浏览器将提供控件以允许用户控制视频播放，包括音量、搜索和暂停/恢复播放。
③ height	=pixels	视频显示区域的高度，单位为 CSS像素( 仅限绝对值;没有百分比。)
④ loop	=loop	如果出现该属性，则循环播放(当媒介文件完成播放后再次开始播放)。
⑤ muted	= muted	规定视频的音频输出应该被静音,播放时没声音。它的默认值是`false`，这意味着在播放视频时将有声音。
⑥ poster	=URL	规定视频的海报, 下载时显示的图像，或者在用户点击播放前显示的图像。
⑦ preload	=none,metadata,auto,空字符串	枚举属性.预加载方式. 视频加载方式。冲突属性: 如果使用`"autoplay"`，则忽略该属性。
⑧ src	=url	视频地址. 要播放的视频的 URL。这是可选的;可以在视频中使用`<source>`元素来指定要嵌入的视频地址。
⑨ width	=pixels	视频显示区域的宽度，单位为 CSS像素(仅限绝对值;没有百分比)。
⑩ buffered	要检索的时间范围	缓冲资源的时间范围: 可以读取的属性，以确定缓冲媒体的时间范围。该属性包含一个 TimeRanges 对象。跟踪供`<audio>`和 `<video>` 元素加载使用的媒体哪些部分已经被缓冲。

示例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 属性: 高度和宽度

⑴ <video>视频标签的height高度属性和 width 宽度属性
- 视频高度和宽度: 如何指定视频播放器的高度和宽度 ?
  - 使用视频标签的 height高度属性和width宽度属性
- 设置视频宽高的必要性
  - ① 预留空间: 为什么要规定视频的宽度和高度 ?
    - 如果设置高度和宽度,
      - 在页面加载时会为视频 预留出空间。
  - ② 布局变化:如果没有设置这些属性
    - 浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间. 在页面加载的过程中，布局也会产生变化。
    - 需要预留空间标签: 图片和视频. 这点和 <img>图片资源类似,除了视频资源<vedio> 一般图片也都是要设置宽高属性的,进行预留空间,避免影响布局.
- 宽高和视频缩小
  - 可以通过 height高度和width 宽度属性来缩小视频吗 ?
    - 不可以
  - 为什么不可以 ?
    - ❶ 依然占用大资源: 通过 height 和width属性来缩小视频，也会迫使用户下载原始的视频（即使在页面上它看起来较小,还是会下载很大的资源）。
    - ❷ 视频压缩: 缩放视频的正确的方法是: 在网页上使用该视频前，使用软件对 视频进行压缩。
    - △ 不要通过宽高缩小资源尺寸: 对于<img>图片资源来说,也是如此,缩小的资源,下载时还是会占用很大的带宽,这是很不好的,加载慢也是在考验用户的耐心,体验很不好.
- <video>视频标签的height和 width 宽高的属性值
  - pixels
  - 以像素计的高度值（比如 “100px” 或 100）。
  - 默认单位: 像素
  - 限制单位: 视频显示区域的高度和宽度，单位为 CSS像素( 仅限绝对值;没有百分比)。
  - 视频的宽高为什么不可设置成百分比的值?
保持长宽比: 为了保持长宽比,只修改宽或高,另一个也会随着增大和减小一部分,之后保持不变,被修改的部分,用背景色填充
- 可以用 CSS 来控制视频的宽高尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。
- 如果设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色.(360浏览器默认白色)
长宽比不变: 保持高度不变,把视频的宽,从100,200,300,…600,一开始视频的高随着增大了一部分,后来宽高都不变了,只在宽的左右添加背景色白色(从控件的宽越来越长,可以看出宽在不断变大)
- 长宽比不变 = 保证了视频画面不变形

⑵ poster 属性: 海报图像地址 (下载或播放前显示)

⑵ <video> 视频标签的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 属性: 预加载方式 (枚举属性)

⑶ <video> 视频标签的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 当中支持。
  - ② MP4 容器
    - 通常包括 AAC 以及 MP3 音频和 H.264 视频。
    - 主要在 Internet Explorer 和 Safari 当中支持。
  - ③ 老式的 Ogg 容器
    - 往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。
    - 主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 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>音频和视频标签的 audio,video-src资源地址属性,添加资源
- ② 通过子元素<source> 资源标签的 source-src 添加音频和视频资源
  - 浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec(多媒体数字信号编解码器) 相匹配的媒体。
  - 视频应当包含格式: WebM 和 MP4两种格式，这两种在目前已经足够支持大多数平台和浏览器。
source-type 属性的使用: 浏览器快速找到支持的格式, 节省时间和资源
- 这个属性是可选的，但是建议添加上这个属性
  - 指明了视频文件的 MIME types (与文件名扩展名相同。该名称源于最初在电子邮件中使用的 MIME标准。)
    - MIME 类型列表
  - 浏览器跳过不支持格式,: 同时浏览器会通过检查这个属性来迅速的跳过那些不支持的格式。
    - 加载每一个文件:
      - 如果没有添加 source-type 属性，浏览器会尝试加载每一个文件
      - 直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
      - 所以 ,建议使用类型type指明文件的类型,节省时间.

结束语

捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团表示鼓励和支持吧~❤
捐助二维码:

参考文档
- W3School 教程
- MDN HTML 教程
感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~

转载请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/89425521
- 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
【音频和视频标签】

1. html5中的音频/视频标签1.1 audio 如何定义声音 ?1.1.1 audio 声音标签 HTML5 中的新属性有哪些 ?1.2 source 如何规定可替换的视频/音频文件 ?1.2.1 source 资源标签的属性有哪些 ?1.3 track 如何为媒体资源规定外部文本轨道 ?1.3.1 track 轨道标签的属性有哪些 ?1.4 video 如何定义视频 ?1.4.1 video 视频标签的属性有哪些 ?1.4.2 支持不同浏
复制链接

扫一扫