你能將HTML5 <video>顯示爲全屏幕背景嗎？

Question

如何將HTML5 <video>作爲全屏幕背景顯示到您的網站？與此類似Flash網站演示...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

Answer 1

上的視頻使用position:fixed，將其設置爲100％寬度/高度，並把負z-index上它，所以它看起來一切背後。

如果你看一下VideoJS，控件就是坐在視頻之上的html元素，使用z-index來確保它們在上面。

HTML

<video id="video_background" src="video.mp4" autoplay> 

（添加WEBM和OGG來源，以支持更多的瀏覽器）

CSS

#video_background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1000; 
} 

它會在大多數HTML5瀏覽器，但可能不會用iPhone/iPad ，視頻需要被激活，並且不喜歡它上面的元素。

Answer 2

只是一個評論 - 我已經使用HTML5視頻的全屏背景，它的工作原理 - 但一定要使用高度：100％和寬度：汽車或其他方式 - 以確保你保持寬高比。

至於Ipad - 你可以（顯然）做到這一點，通過隱藏然後強制點擊事件觸發，並具有點擊事件的功能啓動加載/播放（）。如果你的目標是任何移動設備（我想你可能會......）遠離任何這樣的框架是前進的方向。

Answer 3

我可能有點遲，以回答這個問題，但這對於尋找答案的新人很有用。

上面的答案很好，但要獲得完美的視頻背景，您必須檢查寬高比，因爲在調整屏幕大小或在不同的屏幕尺寸上使用屏幕時，視頻可能會剪切或畫布四周變形。

我不久前進入了這個問題，我找到了使用媒體查詢的解決方案。

下面是我對如何創建寫了一個教程Fullscreen Video Background with only CSS

我將在這裏添加代碼，以及：

HTML：

<div class="videoBgWrapper"> 
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg"> 
     <source src="videosfolder/video.webm" type="video/webm"> 
     <source src="videosfolder/video.mp4" type="video/mp4"> 
     <source src="videosfolder/video.ogv" type="video/ogg"> 
    </video> 
</div> 

CSS：

.videoBgWrapper { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -100; 
} 
.videoBg{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

@media (min-aspect-ratio: 16/9) { 
    .videoBg{ 
    width: 100%; 
    height: auto; 
    } 
} 
@media (max-aspect-ratio: 16/9) { 
    .videoBg { 
    width: auto; 
    height: 100%; 
    } 
} 

我希望你覺得它有用。