視頻爲網站背景？ HTML 5

我想使用視頻作爲背景，而不是自動延伸至整個屏幕（背景）的圖像。視頻爲網站背景？ HTML 5

我也想旋轉視頻和圖像..以便有任何順序顯示隨機視頻/圖像。

也很高興知道如何延遲視頻播放，以便視頻只在播放站點後的30秒內播放。

thx！

2010-09-27 Roland

請考慮，許多訪問者會討厭這個功能（我主動阻止這與adblock）。此外，視頻可能會在兩種情況下傷害用戶 - 在計量連接和在遠程桌面會話中查看頁面時，如果上傳帶寬較低，可能無法使用該頁面。 – 2015-06-09 16:27:40

首先，你的HTML標記看起來是這樣的：

<video id="awesome_video" src="first_video.mp4" autoplay />

其次，你的JavaScript代碼看起來就像這樣：

<script type="text/javascript"> 
    var index = 1, 
     playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'], 
     video = document.getElementById('awesome_video'); 

    video.addEventListener('ended', rotate_video, false); 

    function rotate_video() { 
    video.setAttribute('src', playlist[index]); 
    video.load(); 
    index++; 
    if (index >= playlist.length) { index = 0; } 
    } 
</script>

最後但並非最不重要的，你的CSS：

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

這將在您的頁面上創建一個視頻元素，立即開始播放第一個視頻，然後迭代s通過由JavaScript變量定義的播放列表。你的CSS里程可能會因網站其他部分的CSS而異，但100％寬度/高度應該在基本頁面上完成。

來源

2010-09-27 03:09:52

thx，但全屏代碼不起作用。它只是在左上角顯示原始大小的視頻，並使網站上的其他文字消失！ – Roland 2010-10-22 19:13:04

那麼，如果你想全屏，那麼網站上的其他文字顯然會消失。至於全屏不工作，請嘗試將視頻元素的高度和寬度設置爲視口大小。例如'video.width = 1024; video.height = 768;' – 2010-10-26 17:13:20

請看下面的答案。它考慮到所有屏幕尺寸:) – sydlawrence 2011-03-15 04:07:48

我可能有視頻爲背景，延伸到瀏覽器的寬度或高度，溶液（但視頻仍然會保持縱橫比，不可能找到一個解決方案呢。）：

認沽該視頻正好位於身體標記style="width:100%;"之後。右後記，把「bodydummy」 - 標籤：

<body> 
<video id="bgVideo" autoplay poster="videos/poster.png"> 
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/> 
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/> 
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>  
</video> 

<img id="bgImg" src="videos/poster.png" /> 

<!-- This image stretches exactly to the browser width/height and lies behind the video--> 

<div id="bodyDummy">

把bodydummy -div裏面所有的內容，並把正確的z指數在CSS這樣的：

#bgImg{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
} 

#bgVideo{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    z-index: 2; 
    width: 100%; 
    height: 100%; 
} 

#bodyDummy{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
}

希望我能幫幫我。讓我知道，當你可以找到一個解決方案，視頻不會而不是保持高寬比，所以它可以填充整個瀏覽器窗口，所以我們不必把一個bgimage。

來源

2011-03-01 13:24:05 moritz

看看我的jQuery插件videoBG

http://syddev.com/jquery.videoBG/

進行任何HTML5視頻網站的背景...有瀏覽器的圖像回退不支持HTML5

真的很容易使用

讓我知道你是否需要任何幫助。

來源

2011-03-15 04:06:41 sydlawrence

謝謝Sydlawrence！我從一本HTML5書籍（Lawson和Sharp）開始，然後去了網絡......到處搜索「視頻背景html5」並閱讀大量不太正確的信息。你的解決方案就像一個魅力。 – 2011-06-11 05:49:55

@sydlawrence很棒！我已經實施你的解決方案。整合後我有一個問題，那就是在視頻加載之前海報會閃爍一秒 - 如何做到這一點，以便海報只在與html5視頻不兼容時才加載？ – willdanceforfun 2012-06-19 23:41:08

嗨syd，你的插件工作得很好，但它似乎不工作在Firefox上？這怎麼可能？在其他地方它的作品 – woony 2012-09-25 11:16:57

視頻爲網站背景？ HTML 5

回答

相關問題