如何使用jQuery 制作全屏幕背景的嵌入視頻
譯文現(xiàn)在的web開(kāi)發(fā)者都十分喜歡使用全屏的背景。一般來(lái)說(shuō)，這可以通過(guò)使用一張很大尺寸的圖來(lái)做背景去實(shí)現(xiàn)，這就會(huì)充滿整個(gè)瀏覽器。但是，更佳的做法是使用jQuery 和CSS 3去實(shí)現(xiàn)，這將獲得更多瀏覽器的支持。在本文中，將介紹如何使用jQuery和CSS去做一個(gè)全屏的視頻效果，這在目前眾多WEB開(kāi)發(fā)者中也是一個(gè)很熱門的話題。
在本文中，我們將學(xué)習(xí)到使用jQuery和各種jQuery的視頻相關(guān)插件及CSS 3在一個(gè)基本頁(yè)面中實(shí)現(xiàn)嵌入全屏背景視頻。我們使用的視頻插件是BigVideo.js，它其實(shí)是基于視頻插件Video.js script.改造增強(qiáng)而成的。因?yàn)?/span>目前的一些瀏覽器在兼容視頻流的H.264標(biāo)準(zhǔn)時(shí)有些小問(wèn)題，幸運(yùn)的是BigVideo.js能支持用戶向其傳入?yún)?shù)地址可以解決這個(gè)問(wèn)題。我們首先看下本文的運(yùn)行效果，如下圖所示：
讀者可以通過(guò)如下地址看到本文的運(yùn)行效果：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
開(kāi)始
首先用戶可以按上面的地址下載本文的代碼，或者從BigVideo的GitHub網(wǎng)站中（https://github.com/dfcb/BigVideo.js）獲得一份BigVideo類庫(kù)。其中我們會(huì)用到很多要包含的jQuery類庫(kù)，最重要的當(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插件，其中把樣式文件單獨(dú)寫在了styles.css中了。
至于要播放的視頻，代碼中的是從Beachfront B-Roll 中下載的一個(gè)視頻，一個(gè)要注意的是為了能在Firefox瀏覽器中運(yùn)行，有的視頻會(huì)需要重新編碼或者是只能選取的是OGV或是WebM格式的文件。
如何選擇視頻？
本文中的代碼是引用了兩個(gè)不同的視頻。但當(dāng)使用Miro Video Converter這個(gè)軟件對(duì)MP4轉(zhuǎn)換為OGV或Theora格式的視頻文件時(shí)，發(fā)現(xiàn)效果不是太好。但是，我們也要把OGV文件復(fù)制到例子中的Demo文件夾下。因?yàn)槿绻С?/span>H.264解碼標(biāo)準(zhǔn)的HTML 5視頻瀏覽器會(huì)解碼成MP4格式的視頻，但另外的瀏覽器陣營(yíng)（如Mozilla）會(huì)解碼為OGV格式文件，因此我們準(zhǔn)備了兩種格式的文件，這個(gè)情況只能期望將來(lái)各大瀏覽器廠商統(tǒng)一標(biāo)準(zhǔn)去解決了。
視頻的樣式
在展示代碼前，首先展示下視頻的CSS部分樣式，這里都存放在styles.css文件中，其中的很多樣式和涉及到的ID在本文中的例子中是有具體使用場(chǎng)景的，如果用戶想放在自己的應(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)整，因?yàn)檫@些是為了實(shí)現(xiàn)全屏幕效果而設(shè)的。其中要注意big-video.js這個(gè)本身是一個(gè)視頻播放的控件，有一些如“播放”，“暫停”的按鈕，但在這個(gè)樣式中，我們對(duì)其進(jìn)行了隱藏。有css基礎(chǔ)的讀者可以留意到，
#big-video-control-play中指定了透明的png圖。
使用jQuery播放視頻
下面，我們看下如何在HTML頁(yè)面中調(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});
- });
這個(gè)如果熟悉Javascript的朋友相信應(yīng)該知道，首先是新建立了BigVideo的實(shí)例對(duì)象，其中useFlashForFirefox為false,指定在FireFox瀏覽器中不顯示Flash格式的視頻，然后對(duì)視頻進(jìn)行了初始化。
接著看show的方法，其中接收兩個(gè)參數(shù)，***個(gè)是視頻的url地址，這里我們使用的是mp4 視頻，但為了FireFox瀏覽器，在第二個(gè)參數(shù)也就是可選參數(shù)中，使用altSource指定了ogv格式的視頻，并且設(shè)定ambient屬性為true,表示不播放聲音。
有點(diǎn)可惜的是，開(kāi)發(fā)者除了在BigVideo.js demo page中獲得相關(guān)的視頻插件參數(shù)外，其他文檔和例子也不多，這個(gè)希望將來(lái)相關(guān)的開(kāi)源項(xiàng)目開(kāi)發(fā)者能加強(qiáng)這方面的文檔和例子的補(bǔ)充。
原文鏈接：http://blog.templatemonster.com/2013/06/19/embed-fullscreen-background-videos/
