如何使用jQuery 制作全屏幕背景的嵌入視頻
譯文現(xiàn)在的web開發(fā)者都十分喜歡使用全屏的背景。一般來說，這可以通過使用一張很大尺寸的圖來做背景去實現(xiàn)，這就會充滿整個瀏覽器。但是，更佳的做法是使用jQuery 和CSS 3去實現(xiàn)，這將獲得更多瀏覽器的支持。在本文中，將介紹如何使用jQuery和CSS去做一個全屏的視頻效果，這在目前眾多WEB開發(fā)者中也是一個很熱門的話題。
在本文中，我們將學(xué)習(xí)到使用jQuery和各種jQuery的視頻相關(guān)插件及CSS 3在一個基本頁面中實現(xiàn)嵌入全屏背景視頻。我們使用的視頻插件是BigVideo.js，它其實是基于視頻插件Video.js script.改造增強(qiáng)而成的。因為目前的一些瀏覽器在兼容視頻流的H.264標(biāo)準(zhǔn)時有些小問題，幸運的是BigVideo.js能支持用戶向其傳入?yún)?shù)地址可以解決這個問題。我們首先看下本文的運行效果，如下圖所示：
讀者可以通過如下地址看到本文的運行效果：http://blog.tmimgcdn.com/wp-content/uploads/2013/06/demo-video-background-tut/index.html，
代碼的下載地址在：http://blog.tmimgcdn.com/wp-content/uploads/2013/06/fullscreen-video-bg-source-code.zip?9d7bd4
開始
首先用戶可以按上面的地址下載本文的代碼，或者從BigVideo的GitHub網(wǎng)站中（https://github.com/dfcb/BigVideo.js）獲得一份BigVideo類庫。其中我們會用到很多要包含的jQuery類庫，最重要的當(dāng)然是jQuery和jQuery UI、jQuery imagesloaded和Video.js，其中BigVideo都包它們都包括進(jìn)去了。如下代碼所示：
- <!doctype html>
- <html lang="en-US">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <title>Fullscreen Video Backgrounds - Demo Page</title>
- <meta name="author" content="Jake Rocheleau">
- <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
- <link rel="icon" href="http://www.templatemonster.com/favicon.ico">
- <link rel="stylesheet" type="text/css" media="all" href="styles.css">
- <script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
- <script type="text/javascript" src="js/jquery.imagesloaded.js"></script>
- <script type="text/javascript" src="js/video.js"></script>
- <script type="text/javascript" src="js/bigvideo.js"></script>
- </head>
可以看到，在上面的代碼中，逐一引入了相應(yīng)的jQuery插件，其中把樣式文件單獨寫在了styles.css中了。
至于要播放的視頻，代碼中的是從Beachfront B-Roll 中下載的一個視頻，一個要注意的是為了能在Firefox瀏覽器中運行，有的視頻會需要重新編碼或者是只能選取的是OGV或是WebM格式的文件。
如何選擇視頻？
本文中的代碼是引用了兩個不同的視頻。但當(dāng)使用Miro Video Converter這個軟件對MP4轉(zhuǎn)換為OGV或Theora格式的視頻文件時，發(fā)現(xiàn)效果不是太好。但是，我們也要把OGV文件復(fù)制到例子中的Demo文件夾下。因為如果支持H.264解碼標(biāo)準(zhǔn)的HTML 5視頻瀏覽器會解碼成MP4格式的視頻，但另外的瀏覽器陣營（如Mozilla）會解碼為OGV格式文件，因此我們準(zhǔn)備了兩種格式的文件，這個情況只能期望將來各大瀏覽器廠商統(tǒng)一標(biāo)準(zhǔn)去解決了。
視頻的樣式
在展示代碼前，首先展示下視頻的CSS部分樣式，這里都存放在styles.css文件中，其中的很多樣式和涉及到的ID在本文中的例子中是有具體使用場景的，如果用戶想放在自己的應(yīng)用中，可能需要作一些適當(dāng)?shù)男薷模?/span>
/* BigVideo Styles */
#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:20px;padding: 0 20px;width:100%;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}
注意其中的有些選擇器如#big-video-wrap 不需要調(diào)整，因為這些是為了實現(xiàn)全屏幕效果而設(shè)的。其中要注意big-video.js這個本身是一個視頻播放的控件，有一些如“播放”，“暫停”的按鈕，但在這個樣式中，我們對其進(jìn)行了隱藏。有css基礎(chǔ)的讀者可以留意到，
#big-video-control-play中指定了透明的png圖。
使用jQuery播放視頻
下面，我們看下如何在HTML頁面中調(diào)用bigvideo.js插件，代碼如下：
- <script type="text/javascript">
- $(function() {
- var BV = new $.BigVideo({useFlashForFirefox:false});
- BV.init();
- BV.show('media/rochester-falls.mp4', {altSource:'media/river.ogv', ambient: true});
- });
這個如果熟悉Javascript的朋友相信應(yīng)該知道，首先是新建立了BigVideo的實例對象，其中useFlashForFirefox為false,指定在FireFox瀏覽器中不顯示Flash格式的視頻，然后對視頻進(jìn)行了初始化。
接著看show的方法，其中接收兩個參數(shù)，***個是視頻的url地址，這里我們使用的是mp4 視頻，但為了FireFox瀏覽器，在第二個參數(shù)也就是可選參數(shù)中，使用altSource指定了ogv格式的視頻，并且設(shè)定ambient屬性為true,表示不播放聲音。
有點可惜的是，開發(fā)者除了在BigVideo.js demo page中獲得相關(guān)的視頻插件參數(shù)外，其他文檔和例子也不多，這個希望將來相關(guān)的開源項目開發(fā)者能加強(qiáng)這方面的文檔和例子的補(bǔ)充。
原文鏈接：http://blog.templatemonster.com/2013/06/19/embed-fullscreen-background-videos/
