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

Question

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

这个问题的第一部分是，我很少遇到 video-backgrounds 卡在加载中的情况。那是因为我对我使用的连接很幸运，还是制作视频背景的人很聪明并且以某种方式将视频压缩到一个小file-size？

这个问题的第二部分是，在我的客户网站上实现这个视频背景的最佳方式是什么？是使用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-purposes 的优点发表评论，我们也将不胜感激。

Answer 1

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

关于其他问题：

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

Answer 2

这是我推荐的纯 CSS 和 HTML 解决方案，因为 iframe 需要更长的时间来加载并且 google 希望页面加载速度更快（影响 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;
    }
}

Answer 3

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

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

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

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

我已经尝试了很多，bigvideo、masterslider 等...但对我来说，tubular 是最容易集成的，没有错误，而且在我看来最重要的是，你可以添加层 text/elements/links 在视频顶部。

你可以看看下面这个我用tubular为客户做的网站：www.avocats-huertas.com

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

Fullscreen video background - <video> vs YouTube/Vimeo-<iframe>?

html

css

youtube

video