原地址：http://sighingnow.github.io/web-tech/web_video_background.html

---

 

將視頻作為網頁背景

 Published On July 29, 2015

一些門戶網站采用視頻作為網頁背景，具有很好的展示效果，而隨着HTML5技術的發展和瀏覽器支持程序的提升，采用視頻作為網頁背景也變得越來越容易。

技術分析

CSS里的background-image屬性只能使用圖片、SVG、顏色或漸變色。但從技術講，我們是可以偽造出一種效果，讓視頻以背景的角色出現在其它HTML元素后面。這其中的難點是視頻要填充整個瀏覽器頁面，而且要響應瀏覽器窗口大小的變化。

視頻作為網頁背景，需要考慮一下這幾個問題：

1. 作為背景的視頻應該設置為自動播放(set to autoplay)，而默認狀態下應該是關閉聲音(視頻里面最好不含聲音)。
2. 背景視頻應該有個替代圖片，當瀏覽器不支持這種HTML5技術、視頻格式時用圖片替代。
3. 視頻長度很重要(12-30秒之間)。
4. 視頻的體積應很小，盡量的壓縮。同時，它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能，應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。

視頻格式

當前，video 元素支持三種視頻格式：

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

視頻格式說明：

• Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
• MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
• WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

具體實現

HTML5支持video標簽，因此，很容易插入一段視頻：

<video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> 

這里擺放視頻格式的順序很重要，因為有些版本的谷歌瀏覽器里，如果.webm格式的視頻放在了其他視頻后面，視頻將無法播放。

我們使用視頻的第一幀圖像作為視頻的封面圖片，這樣，當背景視頻一旦加載完成，我們可以看到很流暢的從圖片過度到背景視頻播放。

接下倆，通過CSS控制視頻全屏：

video#bgvideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(polina.jpg) no-repeat; background-size: cover; } 

注意需要在CSS中使用background屬性來控制頁面背景，在較老版本的瀏覽器上，當視頻無法播放時，使用背景圖片作為網頁背景。

HTML 5中的video標簽支持通過control屬性供添加播放、暫停和音量控件。例如：

<video controls="controls" width="800" height="480"> Your browser does not support the video tag. <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> 

在網頁上顯示內容

要想在以視頻為背景的網頁上顯示內容，只需要創建一個div做容器，在設置CSS樣式即可：

<div id="polina"> <h1>POLINA</h1> <p>filmed by Alexander Wagner 2011</p> </div> 

控制樣式：

#polina { font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif; font-weight: 100; background: rgba(0,0,0,0.3); color: white; padding: 2rem; width: 33%; margin: 2rem; float: right; font-size: 1.2rem; } 

控制視頻播放

可以通過創建一個button來控制背景視頻的播放，只需要同構javascript腳本來綁定事件即可：

<button>Pause</button> 

CSS：

#polina button { display: block; width: 80%; padding: .4rem; border: none; margin:1rem auto; font-size: 1.3rem; background: rgba(255,255,255,.23); color: #fff; border-radius: 3px; cursor: pointer; -webkit-transition:.3s background; transition: .3s background; } #polina button:hover{ background: rgba(0,0,0,.5) } 

事件腳本：

首先，通過document.querySelector獲取button控件，然后通過addEventListener綁定事件即可。

var video = document.getElementById("bgvideo"), pauseButton = document.querySelector("#polina button"); pauseButton.addEventListener("click",function() { video.classList.toggle("stopfade"); if(video.paused) { video.play(); pauseButton.innerHTML="Pause"; } else { video.pause(); pauseButton.innerHTML="Paused"; } },false); video.addEventListener('touchstart',function(e){e.preventDefault();video.play();}) 

在線演示：將視頻作為網頁背景(演示)。