視頻在網(wǎng)絡(luò)發(fā)展中扮演著至關(guān)重要的角色。隨著互聯(lián)網(wǎng)的普及和帶寬的增加，視頻成為人們獲取信息、娛樂(lè)和交流的重要方式之一。建設(shè)一個(gè)功能豐富、內(nèi)容優(yōu)質(zhì)的視頻類網(wǎng)站，對(duì)于滿足用戶需求，推動(dòng)網(wǎng)絡(luò)發(fā)展具有重要意義。

一、網(wǎng)站分類

1. 推薦: 在網(wǎng)站首頁(yè)展示熱門和新發(fā)布的視頻，讓用戶*一時(shí)間了解到精彩的內(nèi)容。

2. 分類: 根據(jù)不同類型的視頻進(jìn)行分類，如電影、電視劇、紀(jì)錄片、綜藝、動(dòng)漫等。每個(gè)分類下可以進(jìn)一步細(xì)分，根據(jù)不同的流派、時(shí)間、地區(qū)等進(jìn)行分類。

3. 熱門/排行榜: 展示*受歡迎的視頻，讓用戶發(fā)現(xiàn)和觀看*熱門的內(nèi)容。

4. 搜索: 提供強(qiáng)大的搜索功能，讓用戶可以根據(jù)關(guān)鍵詞搜索到自己感興趣的視頻。

5. 彈幕評(píng)論: 提供用戶評(píng)論和彈幕的功能，讓用戶可以與其他人互動(dòng)、分享觀點(diǎn)和交流。

6. 用戶頻道: 允許用戶創(chuàng)建個(gè)人頻道，上傳和分享自己的視頻作品，激發(fā)用戶的創(chuàng)造性和參與度。

7. VIP會(huì)員: 提供付費(fèi)訂閱服務(wù)，享受高清、無(wú)廣告或**內(nèi)容等特權(quán)。

二、技術(shù)選型

1）前端： jquery + Bootstrap界面框架，能夠很快設(shè)計(jì)出美觀的效果，重點(diǎn)是頁(yè)面布局風(fēng)格，如何做到人見(jiàn)人愛(ài)

2）后端： Nginx + PHP + MySQL，這個(gè)沒(méi)有太多的討論必要，技術(shù)很成熟。前后端完全分離，后端提供Restful API接口給前端，前端通過(guò)接口獲取數(shù)據(jù)并渲染

3）視頻服務(wù)器： 云視睿博 NTV Media Serve G3，非常成熟好用的視頻平臺(tái)，播出效果流暢高效，集成幾個(gè)接口就可以實(shí)現(xiàn)上傳、截圖、轉(zhuǎn)碼、播出、管理等功能，這個(gè)也算是成功的重要環(huán)節(jié)

三、設(shè)計(jì)細(xì)節(jié)

重點(diǎn)說(shuō)前端設(shè)計(jì)和實(shí)現(xiàn)，是*花費(fèi)時(shí)間和精力的環(huán)節(jié)。

**確定頁(yè)頁(yè)面包括：

主要頁(yè)面： 首頁(yè)（主頁(yè)）、播放頁(yè)、個(gè)人頁(yè)、資源管理頁(yè)、登錄頁(yè)；

次要頁(yè)面： 關(guān)于

跳轉(zhuǎn)頁(yè)面： 公司主頁(yè)、公司內(nèi)部站

經(jīng)過(guò)分析，我們認(rèn)為，對(duì)于一個(gè)視頻網(wǎng)站，應(yīng)當(dāng)盡量減少二級(jí)頁(yè)面的數(shù)量，要在主頁(yè)上就能實(shí)現(xiàn)視頻展示和播放，以及“關(guān)于”信息的展示。這樣確定后，頁(yè)面就簡(jiǎn)化為如下3個(gè)：

主頁(yè)： 資源展示、視頻播放、關(guān)于

個(gè)人頁(yè)： 個(gè)人信息顯示和修改

資源管理頁(yè)： 上傳和管理視頻資源，編輯視頻資源信息

3.1 首頁(yè)設(shè)計(jì)

首頁(yè)要展示的信息包括：

1）標(biāo)題、LOGO、登錄用戶信息、手機(jī)訪問(wèn)入口、關(guān)于

2）資源分類名

3）資源列表，以卡片形式展示資源信息，卡片上包括封面、標(biāo)題、小標(biāo)題、大小、碼率等信息

4) 頁(yè)腳

頁(yè)面設(shè)計(jì)效果如下：

在頁(yè)頭部分，包括了LOGO、手機(jī)掃碼入口、關(guān)于和登錄用戶。Logo居左，功能鏈接放于右上，顯得錯(cuò)落有致，也是一種常見(jiàn)的設(shè)計(jì)模式。

LOGO下面是分類類表，點(diǎn)擊每個(gè)分類名稱，頁(yè)面上的資源卡片會(huì)動(dòng)態(tài)變化，加載該分類的內(nèi)容。

頁(yè)面卡片部分，顯示的信息很多，包括了：封面、標(biāo)題、大小、市場(chǎng)、碼率、分辨率、上傳時(shí)間、觀看次數(shù)等等，但由于采用卡片式展示，也顯得很簡(jiǎn)潔。

頁(yè)腳的設(shè)計(jì)，采用了常見(jiàn)的居中模式，不再細(xì)說(shuō)。

3.2 播放設(shè)計(jì)

視頻播放原來(lái)計(jì)劃在單獨(dú)的頁(yè)面播放，也就是點(diǎn)擊卡片，打開一個(gè)新頁(yè)面，在新頁(yè)面里播放。

經(jīng)過(guò)分析發(fā)現(xiàn)，播放頁(yè)沒(méi)有太多延伸業(yè)務(wù)，只是播放視頻，因此我們認(rèn)為放在首頁(yè)以彈窗形式播放更好些，用戶不用打開新頁(yè)面就能播放，避免了多個(gè)頁(yè)面之間的跳轉(zhuǎn)和關(guān)閉操作。

3.3 登錄頁(yè)面

登錄頁(yè)面是一個(gè)獨(dú)立頁(yè)面，用戶訪問(wèn)首頁(yè)、資源頁(yè)，如果沒(méi)有登錄則會(huì)提示登錄，并跳轉(zhuǎn)到登錄頁(yè)。

登錄可以使用手機(jī)號(hào)碼和微信登錄，這兩種登錄方式是可以通過(guò)后臺(tái)設(shè)置進(jìn)行開啟和關(guān)閉的，例如只保留手機(jī)登錄。

3.4 其他頁(yè)面

資源管理、用戶個(gè)人頁(yè)面，也采用卡片展示，不再細(xì)說(shuō)。

四、手機(jī)觀看

手機(jī)頁(yè)面采用Bootstrap界面框架的自適應(yīng)優(yōu)勢(shì)，根據(jù)屏幕大小進(jìn)行自動(dòng)調(diào)整布局和元素大小，實(shí)現(xiàn)一套代碼了多屏展示，*大限度的節(jié)省了工作量。當(dāng)然也有些細(xì)節(jié)需要處理，通過(guò)使用少量的js代碼和自定義CSS來(lái)實(shí)現(xiàn)更優(yōu)的多屏展示效果。這個(gè)設(shè)計(jì)可以在PC和各種移動(dòng)終端上美觀的展示和播放視頻。

五、經(jīng)驗(yàn)總結(jié)

這個(gè)項(xiàng)目花費(fèi)了大約兩周時(shí)間，很順利，有些經(jīng)驗(yàn)值得總結(jié)。

1）帶有動(dòng)態(tài)數(shù)據(jù)的網(wǎng)站，要做到徹底的前后端分離，這樣團(tuán)隊(duì)工作才可以更順暢的開展，設(shè)計(jì)、實(shí)現(xiàn)和維護(hù)也更輕松

2）要使用成熟的產(chǎn)品和框架，例如通過(guò)采用云視睿博NTV Media Sever G3流媒體服務(wù)器完全整合了視頻管理和播出的細(xì)節(jié)，大大縮短了開發(fā)時(shí)間，規(guī)避了技術(shù)風(fēng)險(xiǎn)。再如通過(guò)使用Bootstrap界面框架，界面的設(shè)計(jì)工作就更加規(guī)范和統(tǒng)一，避免在一些界面元素效果上再反復(fù)討論設(shè)計(jì)。

3）用好代碼管理工具，通過(guò)使用git等版本管理工具做好嚴(yán)格的版本控制和研發(fā)協(xié)作規(guī)范。

一個(gè)成功的視頻類網(wǎng)站通過(guò)詳細(xì)的欄目分類和高質(zhì)量的內(nèi)容，為用戶提供便捷的觀看體驗(yàn)和豐富的視頻選擇，推動(dòng)網(wǎng)絡(luò)發(fā)展和視頻產(chǎn)業(yè)的繁榮。通過(guò)網(wǎng)絡(luò)，用戶可以隨時(shí)隨地觀看到不同類型的視頻內(nèi)容，獲取信息和娛樂(lè)的方式更加多樣化和便捷化。