基于官方规范系列篇之——HTML 篇（六）视频

大家好呀，我是前端创可贴。

上一章我们学习了关于源、跨域开放者策略、跨域嵌入策略、跨域隔离等相关内容，相信大家对于源和跨域有了更加深刻的了解。

这一章我们再一起来学习一下 HTML 中的视频。

视频

在这个视频横行其道的年代，大家对视频肯定都不陌生，大多视频平台不仅仅有移动端应用，还会有 Web 端，毕竟 Web 端不需要预先下载平台即可直接访问并观看。相信有许多人像创可贴我一样，在 PC 端看视频不喜欢下载应用，而是使用 Web 端观看。

在页面中，我们通过 video 元素即可嵌入视频，video 元素可以用于播放视频或带有字幕的音频文件，没想到吧，音频竟然也可以用 video 元素，其主要是为了给音频文件加字幕，加字幕这个功能我们下面小节再细说。

<video src="xxx.mp4"></video>

一些旧版本浏览器，或者在浏览器设置里关闭了网站的视频功能，则浏览器不支持播放视频，所以为了兼容性，我们一般在嵌入视频时会做一个兜底的展示，例如当浏览器不支持视频时展示一段提示信息，当然了如果浏览器支持播放视频是不会展示提示信息的。通过在 video 元素内放置内容即可：

<video src="xxx.mp4">
  您的浏览器不支持播放视频
</video>

controls

指定了该属性，浏览器会显示默认的播放工具，可以暂停/开始播放、调节音量、全屏、打开字幕等。

<video src="xxx.mp4" controls></video>

如果没有该属性，浏览器不会显示任何的播放工具，甚至没有播放按钮。这是方便我们开发者可以自定义播放工具，用来控制视频的播放等。

我们常看的视频网站，都会关闭 controls，并且自定义播放工具，我们来看看 B 站：

可以看到，B 站的播放工具都是自定义的 DOM 来展示的。

poster

如果视频加载时间很久，视频元素就会黑屏很久，体验不是很好，所以可以让视频元素在加载视频的过程中，先显示一张相关的图片，缓解用户焦躁的心情。通过 poster 属性指定图片的 url：

<video src="xxx.mp4" controls poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
  您的浏览器不支持播放视频
</video>

poster 属性设置生效后，会产生一个 poster 帧（poster frame），poster 帧就是 poster 属性设置的那张图片。

默认情况下，视频还没播放之前，视频元素的宽高，是 poster 属性中图片的宽高，而一旦视频开始播放，视频元素的宽高就会变为视频的原始尺寸，可能会触发回流重绘。可以将 poster 属性图片尺寸设置为视频的尺寸大小，或者将 video 元素设置固定的宽高等。

poster 属性带来的缺点是多请求了一张图片，理所当然的也会推迟 window 对象的 load 事件的触发。

crossorigin

crossorigin 属性告诉浏览器怎么处理跨域资源，是否要携带资源凭证。该属性不仅可以用在 video 属性上，还可以用在 audio、img、link、script 元素上。该属性与上一章我们学习的跨域有很大的关系。

它的值可以是：

• anonymous：跨域资源不会携带 cookie，响应头的 Set-Cookie 也不会生效，并且如果资源没有设置 CORS 相关响应头，资源会获取失败。
• use-credentials：跨域资源会携带 cookie，同样的如果资源没有设置 CORS 相关响应头，资源会获取失败。
• "" 、无效值或者省略：效果同 anonymous。

在测试之前先看看我们的视频资源是携带了 cookie 的：

当我们设置 crossorigin 值为 anonymous 后：

<video
  src="xxx.mp4"
  controls
  poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
  crossorigin="anonymous"
  ></video>