全屏视频背景 - < video> vs YouTube / Vimeo-< iframe&gt ;? [英] Fullscreen video background - <video> vs YouTube/Vimeo-<iframe>?

问题描述

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

I'm making a website that has a fullscreen video background, for the header section. I would like for the site to load and run as fast and smooth as possible, so I don't know if it could be trouble that the homepage has to load a 50-100mb video before running (even though it probably will stream the video, as it loads - but I know nothing about how this works).

我这个问题的第一部分是，我很少绊倒在视频背景，被卡住加载。是因为我很幸运与我使用的连接，或者是使视频背景只是聪明的人，并以某种方式压缩视频到一个小的文件大小的人？

My first part of this question is, that I very rarely stumble across video-backgrounds that gets stuck loading. Is that because I'm lucky with the connections I use, or are the people who are making the video backgrounds just smart and somehow compress the video to a small file-size?

这个问题的第二部分是，最好在客户网站上实现这个视频背景的方法是什么？是否使用HTML5 < video> 标记？ （在此链接中找到）：

The second part of this question is, which way is the best to implement this video background on my clients website? Is it to use the HTML5 <video> tag? (found in this 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？

... or is it to use YouTube or Vimeo, by inserting it as an <iframe>? I guess the real question is, if my hosting company (One.com) offer me more bandwidth than YouTube or Vimeo? Or if there's a recommended way out there to do this?

如果可以对SEO的目的做更好的评论，那么这也是值得赞赏的。

And if a comment can be made about what's better for SEO-purposes, then that would be appreciated as well.

推荐答案

您必须在YouTube上上传视频，并使用插件在您的网站上显示），原因如下：

You definitely have to upload your video on Youtube and use a plugin to display it on your site (tubular.js for example), for the following reasons:

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

1) youtube doesnt need the browser to load the video in full, it is caching small parts, making it accessible nearly immediately

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

2) youtube scales the resolution of the video to your bandwidth (if you have low bandwidth, the video will display in low quality, but the waiting time to start playing the video will be optimal)

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

I strongly suggest that you use a plugin such as tubular (http://www.seanmccambridge.com/tubular/)

我试过很多，bigvideo，masterslider等...但对于我来说，管道是最容易集成，不是buggy，最重要的是，在我看来，你可以添加文本/元素/链接在视频顶部。

I have tried many of them, bigvideo, masterslider, etc... but for me tubular is the easiest to integrate, is not buggy, and the most important in my opinion, you can add layers of text/elements/links on top of the video.

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

You can have a look at the following website that I have done for a customer using tubular : www.avocats-huertas.com

这篇关于全屏视频背景 - < video> vs YouTube / Vimeo-< iframe&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！