HTML – 全屏视频背景 – 与YouTube / Vimeo-？

我正在创建一个具有全屏视频背景的网站,用于标题部分.我希望网站加载和运行尽可能快速和流畅,所以我不知道主页是否必须在运行之前加载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的目的做出更好的评论,那么也会受到赞赏.

解决方法

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

1)youtube不需要浏览器完整加载视频,它正在缓存小部件,使其几乎可以立即访问

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

我强烈建议您使用插件,如管状(http://www.seanmccambridge.com/tubular/)

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

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