如何在网站上嵌入视频背景（快速、循环、自动播放）

Question

在我的网站上，我想要在后台播放全屏视频。

请注意，我已经找到了相关的问题和答案（例如1、2、3），但它们只提供了我问题的部分解决方案。

起初，我使用 HTML5 <video> 标签直接从我的服务器加载视频，但加载时间很长。即使使用不同的分辨率和压缩设置调整文件大小，我仍然有大约 50MB 的数据要加载。

您对如何实现这一目标有什么建议吗？我假设有流媒体平台（如 YouTube）的解决方案，但我找不到我需要的信息。

以下几个方面对我来说很重要：

• 理想情况下视频应该立即加载
• 自动播放
• 无限循环
• 不需要音频
• 没有控件、图标或进度条等干扰
• 理想情况下，可以应用其他样式（例如灰度滤镜）

Answer 1

在流媒体方法上使用 <video> 有利也有弊。

使用<video>的问题

这里最大的问题是加载完整视频的要求。只有当最后一帧可用时，视频才能开始。即使您可以使用 poster 参数在视频完全加载之前显示图像，但这段等待时间几乎会破坏用户的第一印象。

您绝对应该再次尝试生成视频的压缩版本。看看WebM 文件格式，在这里您可以实现非常小的文件大小。

在您的网站上使用原生 <video> 的好处

尤其是在移动设备上，您会注意到在后台播放 YouTube 视频时出现问题。通常，除非用户与之交互（即点击播放按钮），否则视频不会播放。因此，对于您的用户来说，这又不是令人满意的体验，这就是为什么您应该尝试使用 <video> 来代替。

流式传输视频的好处

流式传输视频允许用户开始观看，即使它尚未完全可用。此外，根据设备的网络速度和显示尺寸，视频以量身定制的分辨率和压缩方式交付，使其加载效率更高。试想 YouTube 如果没有这种行为，它将完全无法使用。

最后，这一切都是为了减少页面加载时间。这是一篇很棒的文章，解释了为什么这如此重要：https://web.dev/fast/

但是，如上所述，移动设备上的行为可能会破坏交易，因为需要用户与视频进行交互。

如何：在 <iframe> 中嵌入 YouTube 视频

即使有特定于框架的解决方案可用（只需搜索"embed youtube" on GitHub），您也可以使用一个普通的老式黄金<iframe>来加载您在 YouTube 上托管的视频。

此处描述了所有可用参数：https://developers.google.com/youtube/player_parameters

以下是您的用例示例（此处不使用 sn-p，因为它不会从 YouTube 加载内容）：

<iframe 
  class="bg-video"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&controls=0&loop=1&playlist=dQw4w9WgXcQ"
  frameBorder="0"
  allowFullScreen
  allow="autoplay"
/>

请注意此处使用的 URL 参数。

parameter	meaning
?autoplay=1	Start video automatically
&mute=1	Video without audio
&controls=0	Hide the progress bar and other YouTube UI elements
&loop=1	Play video in a loop. requires another parameter below.
&playlist=dQw4w9WgXcQ	As described in the docs, you have to provide the video ID in the playlist parameter to make looping work - for whatever reason.

尝试一些 CSS 样式以获得您想要的完美显示（也使用来自 this solution 的代码）：

.bg-video {
  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
  background: no-repeat center;
  margin-left: 50vw;
  user-select: none;
  pointer-events: none;

  /*custom styles, for example grayscale appearance*/
  filter: grayscale(0.8);

  /*additional tweaks for positioning, read more in the link above*/
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

这是结果的演示（king 万岁）：