日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何使用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.改造增強而成的。因為目前的一些瀏覽器在兼容視頻流的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都包它們都包括進去了。如下代碼所示：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.   Fullscreen Video Backgrounds - Demo Page
    6. 
  
  
  
  
  6.   
    7. 
  
  
  
  
  7.   
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.   
    10. 
  
  
  
  
  10.   
    11. 
  
  
  
  
  11.   
    12. 
  
  
  
  
  12.   
    13. 
  
  
  
  
  13.   
    14. 
  
  
  
  
  14.   
    15. 
  
  
  
  
  15.

可以看到，在上面的代碼中，逐一引入了相應(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ù)男薷模?/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)整，因為這些是為了實現(xiàn)全屏幕效果而設(shè)的。其中要注意big-video.js這個本身是一個視頻播放的控件，有一些如“播放”，“暫停”的按鈕，但在這個樣式中，我們對其進行了隱藏。有css基礎(chǔ)的讀者可以留意到，

#big-video-control-play中指定了透明的png圖。

使用jQuery播放視頻
　　下面，我們看下如何在HTML頁面中調(diào)用bigvideo.js插件，代碼如下：