建站
咨詢
售后
建站咨詢
新聞中心
現(xiàn)在的web開發(fā)者都十分喜歡使用全屏的背景。一般來(lái)說(shuō)，這可以通過(guò)使用一張很大尺寸的圖來(lái)做背景去實(shí)現(xiàn)，這就會(huì)充滿整個(gè)瀏覽器。但是，更佳的做法是使用jQuery 和CSS 3去實(shí)現(xiàn)，這將獲得更多瀏覽器的支持。在本文中，將介紹如何使用jQuery和CSS去做一個(gè)全屏的視頻效果，這在目前眾多WEB開發(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)槟壳暗囊恍g覽器在兼容視頻流的H.264標(biāo)準(zhǔn)時(shí)有些小問題，幸運(yùn)的是BigVideo.js能支持用戶向其傳入?yún)?shù)地址可以解決這個(gè)問題。我們首先看下本文的運(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
開始
首先用戶可以按上面的地址下載本文的代碼，或者從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)去了。如下代碼所示：
Fullscreen Video Backgrounds - Demo Page
可以看到，在上面的代碼中，逐一引入了相應(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)槿绻С諬.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ù)男薷模?/p>
/* 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è)視頻播放的控件，有一些如“播放”，“暫?！钡陌粹o，但在這個(gè)樣式中，我們對(duì)其進(jìn)行了隱藏。有css基礎(chǔ)的讀者可以留意到，
#big-video-control-play中指定了透明的png圖。
使用jQuery播放視頻
下面，我們看下如何在HTML頁(yè)面中調(diào)用bigvideo.js插件，代碼如下：