全屏視頻背景 - <video> vs YouTube/Vimeo- <iframe>？

我正在製作一個有全屏視頻背景的網站，用於標題部分。我希望網站能夠儘可能快速和平滑地加載和運行，因此我不知道在運行之前主頁是否需要加載50-100mb的視頻會有麻煩（儘管它可能會流式傳輸視頻，因爲它加載 - 但我不知道這是如何工作的）。全屏視頻背景 - <video> vs YouTube/Vimeo- <iframe>？

這個問題的第一部分是，我很少偶然發現卡住加載的視頻背景。那是因爲我對我使用的連接感到幸運，或者是讓視頻背景變得聰明並以某種方式將視頻壓縮成小文件大小的人？

這個問題的第二部分是，哪種方式最好在我的客戶網站上實現這個視頻背景？是否使用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的，通過將它作爲一個？我想真正的問題是，如果我的託管公司（One.com）爲我提供比YouTube或Vimeo更多的帶寬？或者如果有推薦的方法可以做到這一點？

如果可以評論什麼更適合搜索引擎優化的目的，那麼也將讚賞。

來源

2015-11-12 Zeth

你一定要上傳YouTube上的視頻，並使用插件上顯示您的網站（管狀。例如JS），有以下原因：

1）YouTube的犯規所需要的瀏覽器加載視頻全面，它是緩存的小部件，使其可訪問幾乎立即

2）的YouTube秤的分辨率視頻到你的帶寬（如果你有低帶寬，視頻將顯示低質量，但等待時間開始播放視頻將是最佳）

我強烈建議你使用插件如管狀（http://www.seanmccambridge.com/tubular/ ）

我已經嘗試了很多，bigvideo，masterslider，等等......但對我來說，管狀是最容易集成的，不是越野車，而且在我看來最重要的是，你可以在視頻之上添加文本/元素/鏈接層。

你可以看看下面的網站，我有一個客戶使用完成的管狀：www.avocats-huertas.com

來源

2015-11-19 14:41:47

如果這是確定你使用jQuery的你可以嘗試http://dfcb.github.io/BigVideo.js/或http://vodkabears.github.io/vide/

關於問題的其他問題：

它不是拍在50-100MB視頻是個好主意麪對一個可憐的用戶，特別是如果他在移動數據連接
YouTube和Vimeo肯定有比你的託管公司更好的帶寬
即使你不使用jQuery插件使用if RAME的背景視頻是不會正常工作（如果有的話）
我不是一個真正的專家，但我不能讓搜索引擎優化的角度爲背景視頻

來源

2015-11-16 23:52:59 kaosmos

因爲我不能評論（還）對別人的答案，我寫在這裏。使用媒體查詢條件內容（正如Alex Mo建議的）[不會停止瀏覽器加載視頻]（https://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/ ）或其他[在HTML中聲明的資源]（https://www.christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/），我想問一下哪些信息是基於iframe加載速度比別的速度慢的想法（AFAIK速度取決於d/l的數據量和對服務器的請求數）。 – kaosmos

基本上iFrame會導致額外的服務器調用，這就是您應該避免使用它的原因。 Plus：iframe阻止您的主頁的_onload_，直到iframe的內容完全加載。在我看來，爲背景視頻使用iframe也不是最佳做法，因爲您無法控制將顯示的內容。使用短視頻作爲背景。壓縮它並直接用'

謝謝亞歷克斯的澄清。其實我不知道你是否可以使用iframe作爲整頁背景（但我從未嘗試過，所以這只是一個猜測） – kaosmos

這裏一個純粹的CSS和HTML解決方案，我建議，因爲iframe需要更長的時間加載和谷歌希望網頁加載速度快（影響搜索引擎優化!!）。

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

來源

2015-11-18 08:35:41 Mibit

全屏視頻背景 - <video> vs YouTube/Vimeo- <iframe>？

回答

相關問題