設(shè)計實現(xiàn)一個漂亮的視頻網(wǎng)站

時間：2023-10-09 09:54:01 | 來源：網(wǎng)站運營

時間：2023-10-09 09:54:01 來源：網(wǎng)站運營

設(shè)計實現(xiàn)一個漂亮的視頻網(wǎng)站：

一、任務(wù)描述

單位最近要設(shè)計開發(fā)一個全新的視頻網(wǎng)站，用于存放和展示公司的宣傳視頻和培訓(xùn)視頻。

具體要求是：

1）保存和管理公司現(xiàn)存的2000個左右的視頻資源，約5TB的數(shù)據(jù)量。

2）視頻播出要清楚流暢，可以在企業(yè)內(nèi)網(wǎng)和互聯(lián)網(wǎng)上播放

3）能夠通過手機和電腦觀看

4）用戶觀看需要登錄，用戶也可以上傳視頻資源

5）使用一級分類，保留二級分類的擴展能力

6）界面要漂亮簡潔大氣上個檔次！

作為一個技術(shù)團隊負責(zé)人，這個要求對我來說不算很高，實施過程還算順利，下面簡單介紹設(shè)計思路和實現(xiàn)過程。

二、技術(shù)選型

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

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

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

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

重點說前端設(shè)計和實現(xiàn)，是最花費時間和精力的環(huán)節(jié)。

首次確定頁頁面包括：

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

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

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

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

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

個人頁： 個人信息顯示和修改

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

3.1 首頁設(shè)計

首頁要展示的信息包括：

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

2）資源分類名

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

4) 頁腳

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

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

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




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




頁腳的設(shè)計，采用了常見的居中模式，不再細說。

3.2 播放設(shè)計

視頻播放原來計劃在單獨的頁面播放，也就是點擊卡片，打開一個新頁面，在新頁面里播放。

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

3.3 登錄頁面

登錄頁面是一個獨立頁面，用戶訪問首頁、資源頁，如果沒有登錄則會提示登錄，并跳轉(zhuǎn)到登錄頁。

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

3.4 其他頁面

資源管理、用戶個人頁面，也采用卡片展示，不再細說。

四、手機觀看

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

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

這個項目花費了大約兩周時間，很順利，有些經(jīng)驗值得總結(jié)。

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

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

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

-----------------------------------