全屏视频背景 - <video> vs YouTube/Vimeo-<iframe>？答案

【问题标题】：Fullscreen video background - <video> vs YouTube/Vimeo-<iframe>?全屏视频背景 - <video> vs YouTube/Vimeo-<iframe>？
【发布时间】：2016-02-14 03:36:39
【问题描述】：

我正在为标题部分制作一个具有全屏视频背景的网站。我希望网站尽可能快速流畅地加载和运行，所以我不知道主页在运行前必须加载 50-100mb 的视频是否会带来麻烦（即使它可能会流式传输视频，因为它加载 - 但我对它的工作原理一无所知）。

我的这个问题的第一部分是，我很少偶然发现加载卡住的视频背景。那是因为我对我使用的连接很幸运，还是因为制作视频背景的人很聪明并且以某种方式将视频压缩到一个小文件大小？

这个问题的第二部分是，在我的客户网站上实现这个视频背景的最佳方式是什么？是使用HTML5的<video>标签吗？（在此link 中找到）：

<video style="width: 1776px; height: 1009px; margin-left: -98px; 
margin-top: 0px;" id="videobcg" class="fill" width="1580" height="898"
preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"
poster="url-to-poster-picture.jpg">
  <source src="sites/default/files/videos/basic_home.mp4" type="video/mp4">
  <source src="sites/default/files/videos/basic_home.webm" type="video/webm">
  Sorry, your browser does not support HTML5 video.
</video>

... 还是使用 YouTube 或 Vimeo，将其插入为 <iframe>？我想真正的问题是，如果我的托管公司 (One.com) 为我提供比 YouTube 或 Vimeo 更多的带宽？或者是否有推荐的方法来做到这一点？

如果可以就什么对 SEO 的目的更好地发表评论，那也将不胜感激。

【问题讨论】：

标签： css html video youtube

【解决方案1】：

您必须将视频上传到 Youtube 并使用插件在您的网站上显示（例如 tubular.js），原因如下：

1) youtube 不需要浏览器来完整加载视频，它会缓存小部分，使其几乎可以立即访问

2) youtube 将视频的分辨率缩放到您的带宽（如果您的带宽较低，视频将以低质量显示，但开始播放视频的等待时间将是最佳的）

我强烈建议你使用管状 (http://www.seanmccambridge.com/tubular/) 之类的插件

我已经尝试了很多，bigvideo、masterslider 等...但对我来说，tubing 是最容易集成的，不是错误的，而且在我看来最重要的是，您可以添加文本/元素/链接层在视频顶部。

您可以查看我为使用管状的客户所做的以下网站：www.avocats-huertas.com

【讨论】：

现代 HTML5 浏览器真的不会自动流式传输视频吗？似乎比 <video> 更好！</video>
@Mr.Boy 值得注意的是这张票是 4 岁

【解决方案2】：

如果你可以使用 jquery，你可以试试http://dfcb.github.io/BigVideo.js/ 或http://vodkabears.github.io/vide/

关于其他问题：

面对差劲的用户拍摄 50-100MB 的视频不是一个好主意，尤其是当他使用移动数据连接时
YouTube 和 Vimeo 的带宽肯定比您的托管公司更好
即使您不使用 jquery 插件，使用 iframe 作为背景视频也无法正常工作（如果有的话）
我不是真正的专家，但我无法理解背景视频的 SEO 要点

【讨论】：

由于我（还）不能评论其他人的答案，所以我在这里写。对条件内容使用媒体查询（正如 Alex Mo 建议的那样）won't stop the browser to load the video 或其他resources declared in the HTML，我想问一下哪个信息基于 iframe 加载速度比其他内容慢的想法（AFAIK 速度取决于d/l 的数据和对服务器的请求数）。
基本上 iFrame 会导致额外的服务器调用，这就是您应该避免它的原因。另外：iframe 会阻止您的主页的 onload，直到 iframe 的内容完全加载。在我看来，将 iframe 用于背景视频也不是最佳做法，因为您无法控制它将显示的内容。使用短视频作为背景。将其压缩并直接使用<video>标签将其包含在mp4和webm格式中。
感谢 Alex 的澄清。实际上我想知道您是否可以将 iframe 用作整页背景（但我从未尝试过，所以这只是一个猜测）
不客气。我也想知道这是否可能，关于这篇文章应该是可能的：link 但正如你所看到的，这个功能不是有意的。
我修改了答案，因为我发现另一个 jQuery 插件值得注意的完整背景视频 (vodkabears.github.io/vide)

【解决方案3】：

这是我推荐的纯 CSS 和 HTML 解决方案，因为 iframe 需要更长的时间来加载，而谷歌希望页面加载速度快（影响 SEO！）。

<video id="bgvid" autoplay loop poster="vid.jpg">
  <source src="vid.webm" type="video/webm">
  <source src="vid.mp4" type="video/mp4">
</video>

CSS：

video#bgvid { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(vid.jpg) no-repeat;
  background-size: cover; 
}

这也是移动设备的媒体查询：

@media screen and (max-device-width: 800px) {
    html {
         background: url(vid.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

【讨论】：