Question

我正在制作一个具有全屏视频背景的网站，用于标题部分。我希望网站加载和运行尽可能快速和流畅，所以我不知道主页是否必须在运行之前加载50-100mb的视频（尽管它可能会传输视频），因为它加载 - 但我不知道这是如何工作的）。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

这个问题的第二部分是，哪种方式最适合在我的客户网站上实现此视频背景？是否使用HTML5 ＆lt; video＆gt; 标记？（可在此链接中找到）：< / p>＆＃xA;＆＃xA;

 ＆lt; video style =“width：1776px; height：1009px; margin-left：-98px;＆＃xA; margin-top：0px;” id =“videobcg”class =“fill”width =“1580”height =“898”＆＃xA; preload =“auto”autoplay =“true”loop =“loop”muted =“muted”volume =“0”＆ #xA;海报= “URL到海报picture.jpg” ＆GT;＆＃XA; ＆lt; source src =“sites / default / files / videos / basic_home.mp4”type =“video / mp4”＆gt;＆＃xA; ＆lt; source src =“sites / default / files / videos / basic_home.webm”type =“video / webm”＆gt;＆＃xA;抱歉，您的浏览器不支持HTML5视频。＆＃xA;＆lt; / video＆gt;＆＃xA;

＆＃xA;＆＃xA;

...或是否可以使用YouTube或Vimeo，将其插入＆lt; iframe＆gt; ？我想真正的问题是，如果我的托管公司（One.com）为我提供比YouTube或Vimeo更多的带宽？或者，如果有推荐的方法可以做到这一点？

＆＃xA;＆＃xA;

如果可以对SEO的目的做出更好的评论，那么也会受到赞赏。

＆＃XA;

Answer 1

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

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

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

我强烈建议您使用插件，例如管状（http://www.seanmccambridge.com/tubular/）

我尝试了很多，bigvideo，masterslider等...但对我来说管状是最简单的集成，不是越野车，而且在我看来最重要的是，你可以添加文本/元素/链接层在视频之上。

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

Answer 2

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

关于其他问题：

面对一个糟糕的用户拍摄50-100MB视频并不是一个好主意，特别是如果他正在使用移动数据连接
YouTube和Vimeo肯定比您的托管公司拥有更好的带宽
即使你没有使用jrame插件使用iframe作为背景视频效果不佳（如果有的话）
我不是一个真正的专家，但我无法理解背景视频的搜索引擎优化

Answer 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;
    }
}

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

3 个答案: