影音視頻網(wǎng)站——優(yōu)酷網(wǎng)

影音視頻網(wǎng)站是在線發(fā)布、瀏覽和分享視頻作品的平臺。視頻網(wǎng)站在企業(yè)、教育、娛樂等行業(yè)也有很大的應用前景，用戶通過視頻網(wǎng)站觀看新聞、產(chǎn)品宣傳、教學課程、電視電影、娛樂等視頻內(nèi)容，得到更生動、直觀的體驗。視頻網(wǎng)站包括視頻共享、視頻直播、網(wǎng)絡電視、影視劇片庫等內(nèi)容。本章以優(yōu)酷網(wǎng)為例，分析如何創(chuàng)建一個視頻網(wǎng)站。

23.1 網(wǎng)站配置分析

在體系結(jié)構(gòu)上，優(yōu)酷網(wǎng)采用分布式的結(jié)構(gòu)，服務器和存儲設備分布在全國各地，用戶就近訪問，獲得最快的視頻體驗。本案例以優(yōu)酷網(wǎng)為例，分別從服務器配置、主要功能模塊和頁面設計三個方面介紹開發(fā)影音視頻網(wǎng)站的步驟。

23.1.1 服務器配置分析

優(yōu)酷網(wǎng)主要包括Web服務器和流媒體服務器，分別服務于頁面系統(tǒng)與視頻系統(tǒng)。頁面系統(tǒng)用以展示用戶信息、積分、留言以及視頻的截圖、排名、展示等，該系統(tǒng)所用的服務器數(shù)量只占20%左右， 80%的服務器都是用于視頻系統(tǒng)的流媒體服務器，它們通過負載均衡的方式為用戶提供流媒體服務。

優(yōu)酷網(wǎng)視頻系統(tǒng)的加速機制較復雜，通過多種方式保證分布在全國各地的用戶進行就近訪問。用戶點擊視頻請求后，優(yōu)酷網(wǎng)將根據(jù)用戶所處地區(qū)位置，將離用戶最近、服務狀況最好的視頻服務器地址傳送給用戶，從而保證用戶可以得到快速的視頻體驗。另外，還有一些服務器作為轉(zhuǎn)碼服務器。由于用戶上傳的視頻格式很不統(tǒng)一，大小也不一樣，就需要轉(zhuǎn)碼服務器首先進行解碼，解碼后再編碼，最后做成Flash文件，即統(tǒng)一的FLV格式。轉(zhuǎn)碼服務器在做完這些工作后，進行分發(fā)、存儲，最后再通過流媒體服務器將視頻傳送給用戶。

在存儲層方面，與服務器層面的“就近訪問”相對應，優(yōu)酷網(wǎng)的存儲則是采用“分布式存儲”，即將視頻數(shù)據(jù)都存儲在服務器所處的全國各大城市。存儲陣列和處理器以DAS（直連存儲）的方式相連，作為一個存儲單元，每個存儲單元各自為陣，不存在關(guān)聯(lián)。

23.1.2 優(yōu)酷網(wǎng)主要功能模塊及技術(shù)分析

⑴ 頁面按視頻的分類展示：包括多維度分類。從類型方面分類，分為電視劇、電影、綜藝、音樂、動漫等欄目；從內(nèi)容方面分類，分為音樂、體育、財經(jīng)、科技、時尚、汽車、生活、母嬰、游戲、搞笑等欄目。

⑵ 支持視頻搜索：在定向搜索技術(shù)和海量數(shù)據(jù)精準處理模式的基礎上，用戶可通過多種行之有效的搜索方法找到最想看的視頻，其中包括關(guān)鍵字搜索、人氣榜單搜索、相關(guān)視頻推薦、興趣分類匹配及會員ID搜索等。

⑶ 會員管理：包括用戶注冊、登錄，正在看的內(nèi)容，用戶上傳視頻。

⑷ 視頻播放次數(shù)排序：視頻網(wǎng)站對電視劇、電影、綜藝節(jié)目、音樂等視頻的播放次數(shù)進行統(tǒng)計，并列出排行榜，向用戶推薦最熱門的節(jié)目。

⑸ 視頻評論管理：用戶可以發(fā)表對視頻的評論，也可以回復別人的評論和別人一起探討分享心得，還可以通過評論了解到這個視頻的內(nèi)容，以及這個視頻是否值得觀看。

⑹ 用戶視頻上傳：視頻網(wǎng)站支持多種視頻格式，支持斷點續(xù)傳，支持多個文件同步上傳。

23.1.3 頁面設計分析

根據(jù)視頻網(wǎng)站的設計理念、功能和提供的服務，視頻網(wǎng)站的創(chuàng)建者要確定網(wǎng)站的組織和布局。一般視頻網(wǎng)站以分類列表的形式展示視頻，提供多維度的搜索，展示熱點和排行，這樣可全面地把握住觀眾所關(guān)心的事物，吸引觀眾的眼球。本小節(jié)將介紹優(yōu)酷網(wǎng)的架構(gòu)，用戶在IE瀏覽器地址欄輸入http://www.youku.com，即可登錄優(yōu)酷網(wǎng)。下圖所示為優(yōu)酷網(wǎng)的首頁。優(yōu)酷網(wǎng)的首頁以藍色作為基本色，配以白色的背景、黑色的文字，網(wǎng)頁淡雅明快。

在優(yōu)酷網(wǎng)站中，視頻播放頁面是重要的組成部分。優(yōu)酷播放頁的設置是播放區(qū)域靠左側(cè)，寬度大概占了2/3個屏幕；播放區(qū)域下側(cè)是一些常用的用戶行為按鈕，比如收藏、引用等；右側(cè)是視頻信息及相關(guān)視頻。整個第一屏涵蓋了主要的信息，用戶可以一目了然無需拖動滾動條。下圖所示為優(yōu)酷網(wǎng)視頻播放頁面。

優(yōu)酷網(wǎng)首頁的排版框架采用上中下結(jié)構(gòu)。上部是導航區(qū)，包括水平導航欄、搜索框、用戶注冊和登錄模塊；位于中間的主體部分采用左右結(jié)構(gòu)，里面的子塊有嵌套結(jié)構(gòu)，左邊欄目是視頻的分類展示，右邊欄目包括各類視頻的排行榜、品牌官網(wǎng)、推薦、專題等內(nèi)容；底部

是腳注部分，包括底部搜索框、視頻分類、資源、公司信息的超鏈接、版權(quán)和聯(lián)系方式等內(nèi)容。優(yōu)酷網(wǎng)首頁框架如下圖所示。

下面介紹優(yōu)酷網(wǎng)首頁各個模塊的功能以及相關(guān)塊中所包含的子<div>塊。其中網(wǎng)頁頭部導航區(qū)包括優(yōu)酷網(wǎng)的logo、優(yōu)酷的搜庫搜索框、用戶登錄和注冊模塊、用戶“正在看”模塊，頭部的架構(gòu)如下圖所示。其中，.module塊是按照類型分類的，包括電視劇、電影、綜藝、音樂、動漫5個欄目的導航；.sub塊是按內(nèi)容分類的，包括資訊、拍客、紀錄片、體育、汽車、科技、財經(jīng)、娛樂、原創(chuàng)等分類的導航；.logo塊是優(yōu)酷網(wǎng)的logo標志，放在頁面的左上角；.so塊是搜庫的搜索框，包括熱點搜索詞和排行榜、影視大全的超鏈接；.ucenter塊包括登錄、注冊和“正在看”模塊。

網(wǎng)頁頭部相應的代碼如下：

01　<DIV class="navbox">02　<DIV class="module">03　<UL>04　<LI class="current">首頁</LI>05　<LI>電視劇</LI><LI>電影</LI><LI>綜藝</LI><LI>音樂</LI>06　<LI>動漫</LI>07　<LI>全部</LI>08　</UL>09　</DIV>

10　<DIV class="sub">11　<DIV class="channel">12　<UL class="group">13　<LI>資訊</LI><LI>拍客</LI><LI>紀錄片</LI><LI>體育</
LI>……

14　<LI>教育</LI>15　</UL>16　<UL class="group">17　<LI>App下載/LI>18　</UL>19　</DIV>20　</DIV>21　<DIV class="headcon">22　<div　class= " logo "></div><div　class= " so "></
div><divclass="sokutool">23　</DIV><DIV class="soextend"></DIV><DIV
class="ucenter"></DIV>

24　</DIV>

網(wǎng)頁的主體部分分類展示各類視頻。主體上半部分，左邊欄目包括今日頭條、最佳原創(chuàng)、為我推薦等模塊。其中今日頭條模塊包括熱點新聞的視頻截圖、熱點信息的文字超鏈接，以及最熱的視頻截圖以

2列3行的列表形式展示。一般截圖下方包括視頻的點擊率和評論數(shù)，使用戶比較直觀地了解相關(guān)信息。最佳原創(chuàng)模塊，將網(wǎng)友制作上傳的視頻進行展示。為我推薦模塊，可以將用戶最近觀看的視頻進行超鏈接，還有一些推薦的視頻，這是一個個性化的服務。對應的右邊部分包括熱門電視劇、綜藝節(jié)目的推薦。架構(gòu)如下圖所示。

這部分框架代碼如下：

01　<DIV name="m_pos"　id="m_51598">今日熱點</DIV>02　<DIV name="m_pos"　id="m_73095">最佳原創(chuàng) |優(yōu)酷出品</
DIV>03　<DIV class="sideCol">

04　<DIV name="m_pos"　id="m_52027">策劃專題 </DIV>05　<DIV name="m_pos"　id="m_52037">電視劇視頻 </DIV>06　<DIV name="m_pos"　id="m_52036">主題熱播</DIV>07　</DIV>08　<DIV name="m_pos"　id="m_72092">為我推薦</DIV>

主體中間部分包括電視劇欄、電影欄、綜藝欄、音樂欄4個欄目。

左邊部分是按類別顯示相關(guān)內(nèi)容的，并以Tab頁的形式顯示。右邊部分是相關(guān)內(nèi)容的TOP排行榜，使用戶能迅速把握熱門內(nèi)容。按類型分類欄目如下圖所示。左邊欄目都是以4列的列表形式顯示的，列表的單元中顯示熱門視頻的截圖，并且在下方有視頻的相關(guān)文字說明。右邊部分是電視劇、電影、綜藝、音樂播放榜前5名的信息。

這部分框架代碼如下：

01　<DIV name="m_pos"　id="m_52040">電視劇</DIV>02　<DIV name="m_pos"　id="m_52053">電影 |院線 |預告片</

DIV>03　<DIV name="m_pos"　id="m_52062">綜藝 |娛樂</DIV>04　<DIV name="m_pos"　id="m_52075">音樂</DIV>

主體的下半部分，左邊是按內(nèi)容分類的欄目列表，包括體育|財經(jīng)、科技|時尚、汽車、生活、母嬰|旅游、游戲|搞笑、用戶推薦、視頻專題等欄目；右邊是用戶中心、品牌官網(wǎng)、推薦看吧、精彩專題、優(yōu)酷動態(tài)。這些欄目是以4列的列表形式顯示的，列表單元中顯示熱門視頻的截圖，在下方有視頻的說明文字。右邊部分中，用戶中心以

Tab頁形式顯示推薦的明星、牛人、拍客、達人的優(yōu)酷空間，用戶可以通過超鏈接去瀏覽所關(guān)注的名人在優(yōu)酷空間上的相關(guān)視頻。

品牌官網(wǎng)以Tab頁形式展示與優(yōu)酷網(wǎng)合作的品牌的最新發(fā)布信息，包括奢侈品、時尚、汽車、生活等幾個欄目的相關(guān)品牌，以3列

3行的列表形式展示。

推薦看吧列出優(yōu)酷推薦的視頻鏈接，精彩專題是優(yōu)酷網(wǎng)的最新專題信息，優(yōu)酷動態(tài)是優(yōu)酷公司的活動信息等內(nèi)容。

這部分框架代碼如下：

01　　<DIV class="mainCol">02　　<DIV name="m_pos"　id="m_51600">體育 |財經(jīng)</DIV>03　　<DIV name="m_pos"　id="m_51601">科技 |時尚</DIV>

04　　<DIV name="m_pos"　id="m_51602">汽車</DIV>05　　<DIV name="m_pos"　id="m_51603">生活</DIV>06　<DIV name="m_pos"　id="m_83141">母嬰 |旅游</DIV>07　　<DIV name="m_pos"　id="m_51604">游戲 |搞笑</DIV>08　　<DIV name="m_pos"　id="m_51605">用戶推薦</DIV>09　　<DIV name="m_pos"　id="m_51606">視頻專題</DIV>　

</DIV>10　<DIV class="sideCol">11　　<DIV name="m_pos"　id="m_52076">用戶中心</DIV>12　　<DIV name="m_pos"　id="m_53900">品牌官網(wǎng)</DIV>13　　<DIV name="m_pos"　id="m_52084">推薦看吧</DIV>14　　<DIV name="m_pos"　id="m_52085">精彩專題</DIV>15　　<DIV name="m_pos"　id="m_52086">優(yōu)酷動態(tài)</DIV>　

</DIV>

按內(nèi)容分類欄目如下圖所示。

首頁最下方的腳注部分如下圖所示。.links塊包括各個分類的超鏈接、軟件、支持和公司相關(guān)信息；.service塊主要用來放一些版權(quán)信息和聯(lián)系方式，貴在簡單明了。

腳注部分的框架代碼如下：

01　<DIV class="links">02　<DIV class="item　i1">03　<SPAN class="label">資源</SPAN>04　<UL　id="footerResource">05　<LI>首頁</LI> <LI>電視劇</LI>06　<LI>電影</LI> <LI>綜藝</LI> <LI>視頻</LI>07　</UL>08　<SPAN class="label">社區(qū)</SPAN>09　<UL>10　<LI>空間</LI>11　<LI>看吧</A></LI>12　</UL>13　</DIV>14　<DIV class="item　i2">15　<SPAN class="label">分類</SPAN>

16　<UL>17　<LI>資訊</LI>18　<LI>拍客</LI>19　<LI>體育</LI>20　<LI>汽車</LI>21　<LI>科技</LI>22　<LI>財經(jīng)</LI>23 ……　//此處有代碼省略

24　</UL>25　<DIV class="item　i3">26　<SPAN class="label">軟件</SPAN>27　<UL>28　<LI>PC客戶端</LI>29　<LI>手機客戶端</LI>30　<LI>實驗室</LI>31　</UL>

32　<DIV class="item　i4">33　<SPAN class="label">支持</SPAN>34　<UL>35　<LI>繁體版</LI>36　<LI>在線反饋</LI>37　<LI>幫助中心</LI>38　</UL>39　<DIV class="item　i5"><SPAN class="label">公司</SPAN>40　<UL>41　<LI>關(guān)于我們</LI>42　<LI>優(yōu)酷動態(tài)</LI>43　<LI>媒體合作</LI>44　<LI>優(yōu)酷公益</LI>45　<LI>友情鏈接</LI>46　<LI>工作機會</LI>47　<LI>優(yōu)酷指數(shù)</LI>

48　<LI>廣告服務</LI>49　</UL>50　</DIV>51　</DIV>52　<DIV class="service"></DIV>

視頻播放頁面和優(yōu)酷網(wǎng)首頁的風格一致，頁面上方有導航，頁面下方是腳注。這里主要介紹播放頁面的主體架構(gòu)，包括視頻的基本信息、視頻的播放區(qū)、交互區(qū)和播放列表的內(nèi)容。播放頁面架構(gòu)如下圖所示。

視頻播放頁面的框架代碼如下：

01　<DIV class="base">基本信息</DIV>02　<DIV　id="playBox" class="playBox playBox_thx">視頻播放區(qū)</DIV>03　<DIV class="left">交互區(qū)</DIV>04　<DIV class="right">播放列表</DIV>

其中，上方是視頻的基本信息，包括視頻所在分類、視頻的標題；下方左邊主體是視頻播放區(qū)，放置的是視頻播放器及播放組件；視頻播放區(qū)下方是交換區(qū)，包括視頻的支持次數(shù)、播放次數(shù)、收藏和下載按鈕、觀眾評論；右邊區(qū)域是播放列表，包括視頻的相關(guān)視頻信息。

上面已經(jīng)將網(wǎng)站頁面的整體框架設計好了，接下來就需要對各個模塊分別進行處理。以下將詳細介紹視頻網(wǎng)站——優(yōu)酷網(wǎng)的頁面設計技巧，供讀者借鑒。

1.首頁導航區(qū)首先介紹優(yōu)酷網(wǎng)首頁導航區(qū)，前面已經(jīng)說過它十分簡潔。頂部是水平導航欄，導航項是文字鏈接；左邊部分是優(yōu)酷的logo標志；中間部分是搜庫搜索，能夠使用戶快速找到自己需要的信息，并且在搜索框下方提供了熱點詞；右邊部分是用戶登錄、注冊、正在看、上傳模塊。下圖為導航區(qū)的效果圖。

優(yōu)酷網(wǎng)導航區(qū)的CSS樣式的部分代碼如下：

01　.s_header *{color:#000;}02　.s_header　.prinav{height:40px;background:#dbeff9;}03　.s_header　.navbox{width:930px;he ight:40px;padd ing:0 15px;marg in:0auto;}04　.s_header　.prinav　li{float:left;height:32px;margin-right:2px;}05　.s_header　.prinav a:hover{text-decoration:none;
06　color:#000;background:#f1f9fd;}07　.s_header　.prinav　li.current a,08　.s_header　.prinav　li.current a:hover{background:#fff;}09 ……

10　s_subNav　.subNav　.current a{padding:0 3px;
11　line-height:20px;line-height:22px\9;*line-height:22px;}12　.s_subNav　.subNav　.current a:hover{text-
decoration:none;}13　.s_subNav　.subNav　.extend{float:right;}14　.s_subNav　.subNav　.extend *{font-size:12px;}

2.首頁主體部分主體部分包括熱點、原創(chuàng)、推薦、電視劇頻道、電影頻道等板塊。

Tab形式的菜單在網(wǎng)站應用非常廣泛，因為它能夠在狹小的空間里容納更多的內(nèi)容。通過對Tab頁的切換，用戶可以在有限的空間內(nèi)找到感興趣的內(nèi)容。優(yōu)酷網(wǎng)首頁的主體部分，各個欄目的具體分類用

Tab菜單，當鼠標移動到相應某個Tab菜單上時，Tab頁就會顯示相應的內(nèi)容，截圖如下圖所示。

優(yōu)酷首頁中Tab頁的部分CSS樣式的代碼如下：

01　/*Tab頁的視頻截圖以列表項顯示 下面是對列表的樣式設置 */02　ul {03　　　font: 12px/20px arial, helvetica, verdana,　tahoma,
sans-serif; margin:0px; padding: 0px; word-break: break-all; word-
wrap: break-word;　font-size-

adjust: none;　font-stretch: normal;
04　}05　/*對超鏈接的樣式設置 */06　a {　color: rgb（1, 76, 204）;　text-decoration: none;
cursor: pointer;}07　a:hover {　　text-decoration: underline;}08　/*對 Tab菜單的樣式設置 */09　.tab_outer　.tabs　{　　　left:　-14px;　top:　-45px; he
ight: 31px; over f low:hidden; position: absolute;}10　.tab_outer　li {11　border-width: medium 1px; border-style: none solid; border-
color:currentColor　rgb（229, 229, 229）; height: 31px; overflow:
hidden; margin-left:-1px;　float:　left; cursor: pointer;
12　}13　.tab_outer　li a {14　padding: 0px 14px; height: 31px;　text-align: center;　line-
height: 32px;overflow: hidden;　font-size: 14px;　float:　left; display:
block;}

15　.tab_outer　li span {16　padding: 0px 14px; height: 31px;　text-align: center;　line-
height: 32px;overflow: hidden;　font-size: 14px;　float:　left; display:
block;}17　.tab_outer　li.current　{　background:　rgb（255, 255, 255）;　font-weight:bold; cursor: default;}18　.tab_inner {19　margin: -14px -14px 14px; height: 25px; border-bottom-color:
rgb（229,229, 229）; border-bottom-width: 1px; border-bottom-sty le:
so l id; pos it ion:relative;}20　.tab_inner　.tabs {　　top: 0px; overflow: hidden; position:
absolute;}21　.tab_inner　li {22　border-width: medium 1px; border-style: none solid; border-
color:currentColor　rgb（229, 229, 229）; height: 26px; overflow:
hidden; margin-left:-1px;　float:　left; cursor: pointer;}23　.tab_inner　li a {24　padding: 0px 15px; height: 25px;　text-align: center;　line-
height: 26px;overflow: hidden;　font-size: 12px;　float:　left; display:

block;}25　.tab_inner　li span {26　padding: 0px 15px; height: 25px;　text-align: center;　line-
height: 26px;overflow: hidden;　font-size: 12px;　float:　left; display:
block;}27　.tab_inner　li.current　{　background:　rgb（255, 255, 255）;　font-weight:bold; cursor: default;}28　/*對列表排列的樣式設置 */29　.collgrid4w {　margin: 0px auto; width: 580px; overflow:
hidden;}30　.collgrid4w　.items　{　width: 610px; overflow: hidden;
margin-bottom:-10px;}31　.collgrid4w　.v {　margin-right: 22px;　float:　left;}32　.collgrid4w　.p {　margin-right: 22px;　float:　left;}3.首頁腳注部分首頁腳注部分包括聯(lián)系方式、版權(quán)信息等內(nèi)容，在優(yōu)酷網(wǎng)的頁面中保持一致。腳注部分如下圖所示。

交互區(qū)CSS樣式的部分代碼如下：

01　.commentArea　.comment　.con {padding-top: 5px;overflow: hidden;zoom:1;}02　body, div, dl, dt, dd, ul, ol,　li, h1, h2, h3, h4, h5, h6, pre,　

form,　fieldset,input, button, select, option,　textarea, p, blockquote,　

th,　td {03　padding: 0;margin: 0;font: 12px/20px arial, helvetica, verdana,

　tahoma,sans-serif;word-break: break-all;word-wrap: break-word;}04　div {display: block;}5.優(yōu)酷網(wǎng)在視頻播放頁面右側(cè)還有一個側(cè)邊工具欄，包括關(guān)燈、彈窗、反饋、返回頂部等內(nèi)容，如下圖所示。

側(cè)邊工具欄CSS樣式的部分代碼如下：

01　.sideTool {position:　fixed;　left: 50%;bottom: 20px;margin-
left: 486px;}02　body, div, dl, dt, dd, ul, ol,　li, h1, h2, h3, h4, h5, h6, pre,　

form,　fieldset,input, button, select, option,　textarea, p, blockquote,　

th,　td {03　padding: 0;
04 margin: 0;
05　font: 12px/20px arial, helvetica, verdana,　tahoma, sans-
serif;
06　word-break: break-all;
07　word-wrap: break-word;
08　}

其中關(guān)燈實現(xiàn)點擊變暗功能，點擊按鈕或文字指定區(qū)域，整個網(wǎng)頁的背景或主體內(nèi)容變暗，類似“關(guān)燈”了，再次點擊的時候，則變亮了，類似“開燈”了。

實現(xiàn)上述功能的JavaScript代碼如下：

01　<script　language=" javascript" src="http://
www.codefans.net/a jax js/jquery1.3.2.js"></script>

02　<script　language="javascript">03　$（document）.ready（function（）{04　$（"#shadow"）.css（"height", $（document）.height（））.hide（）;
05　$（".lightSwitcher"）.click（function（）{06　$（"#shadow"）.toggle（）;
07　if（$（"#shadow"）.is（":hidden"））

08　$（this）.html（"關(guān)燈 "）.removeClass（"turnedOff"）;
09　else10　$（this）.html（"開燈 "）.addClass（"turnedOff"）;
11　}）;
12　}）;
13　</script>

• 視頻
• 建站
• 視頻網(wǎng)站