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

Zet*_*eth 7 html css youtube video html5

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

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

这个问题的第二部分是,哪种方式最适合在我的客户网站上实现这个视频背景?是否使用HTML5 <video>标签?(在此链接中找到):

<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>
Run Code Online (Sandbox Code Playgroud)

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

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

Vin*_*ier 5

出于以下原因,您绝对必须在YouTube上上传视频并使用插件将其显示在您的网站上(例如,tubular.js):

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

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

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

我已经尝试了其中的许多工具,例如bigvideo,masterslider等...,但对我来说,管状是最容易集成的,不是越野车,而且我认为最重要的是,您可以在文本框的顶部添加文本/元素/链接层该视频。

您可以看一下我为管状客户提供的以下网站:www.avocats-huertas.com