網(wǎng)絡(luò)視音頻系統(tǒng)前臺(tái)界面設(shè)計(jì)與實(shí)現(xiàn)

張慶濤

摘要：該文論述基于jsp的網(wǎng)絡(luò)視音頻網(wǎng)站前臺(tái)界面設(shè)計(jì)，介紹從用戶注冊(cè)、登陸、修改個(gè)人資料、收聽音頻、觀看視頻到收藏夾等界面的設(shè)計(jì)與實(shí)現(xiàn)，為網(wǎng)絡(luò)時(shí)代的人們提供方便、快捷的視音頻使用界面。

關(guān)鍵詞：前臺(tái)界面；JSP；視頻；音頻；播放系統(tǒng)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）11-2649-04

1 簡(jiǎn)介

本文論述以B/S架構(gòu)的網(wǎng)站視音頻播放系統(tǒng)前臺(tái)界面設(shè)計(jì)，開發(fā)模式方面采用的是經(jīng)典的MVC模式，前臺(tái)點(diǎn)播方面沒有運(yùn)用struts等框架，考慮到個(gè)人開發(fā)，因此是JSP頁面和Servlet技術(shù)結(jié)合，JSP頁面包含HTML、CSS和JS等語言，本系統(tǒng)開發(fā)所用集成開發(fā)工具為MyEclipse 8.5、網(wǎng)頁設(shè)計(jì)采用Dreamweaver CS6、數(shù)據(jù)庫(kù)為MySQL 5.1，Web服務(wù)器為tomcat 6.0，系統(tǒng)整體盡力追求模塊化，追求“高內(nèi)聚、低耦合”，力求安全性、方便性、實(shí)用性，同時(shí)也嚴(yán)格按照MVC的方式將各個(gè)功能模塊隔離，這樣便于后期維護(hù)和管理。

6.2 視頻下載

視頻下載相對(duì)于視頻上傳來說相對(duì)簡(jiǎn)單同樣采用fileUpload組件來實(shí)現(xiàn)。點(diǎn)擊視頻播放按鈕下的下載按鈕將把視頻的VideoID發(fā)送到VideoDownLoad.java中，然后對(duì)該VideoID進(jìn)行查詢，得到視頻名稱和地址，然后彈出下載選項(xiàng)。

7 收藏夾

在視頻和音頻播放頁面的播放器的下方，有個(gè)收藏按鈕，該按鈕實(shí)現(xiàn)收藏夾功能模塊中的收藏功能。

收藏夾模塊包含兩個(gè)收藏列表顯示文件四個(gè)功能類文件。用戶也可以點(diǎn)擊各頁面中的收藏夾按鈕查看收藏列表，音頻界面和視頻界面只顯示對(duì)應(yīng)界面中的收藏夾內(nèi)容。

因?yàn)橐纛l收藏和視頻收藏原理相同，兩者唯一的區(qū)別就是在音頻收藏夾中有個(gè)播放音頻收藏的按鈕，該按鈕功能在上面小節(jié)已經(jīng)介紹，這里不再贅述?，F(xiàn)在以視頻收藏夾來說明此功能設(shè)計(jì)，音頻收藏夾同理即可。

7.1 收藏功能的實(shí)現(xiàn)

7.2 顯示功能的實(shí)現(xiàn)

查詢uservideo字段中的內(nèi)容，然后將其轉(zhuǎn)化為數(shù)組，對(duì)從CVX[1]開始的數(shù)組內(nèi)容進(jìn)行逐個(gè)查詢，然后顯示到CollectVideo.jsp或者其它頁面視頻收藏夾顯示窗口中

7.3 刪除功能的實(shí)現(xiàn)

點(diǎn)擊收藏夾文件名后方的刪除鏈接時(shí)，會(huì)將請(qǐng)求提交到CVDelete.java，該類會(huì)將顯示收藏夾的數(shù)組重新轉(zhuǎn)化為字符串，但刪除選項(xiàng)的數(shù)組字段將不被加入該字符串，然后上傳到數(shù)據(jù)庫(kù)中，實(shí)現(xiàn)收藏夾刪除功能。

8 前臺(tái)頁面權(quán)限設(shè)置

參考文獻(xiàn)：

[1] 汪孝宜，劉中兵，徐佳晶，等.JSP數(shù)據(jù)庫(kù)開發(fā)實(shí)例精粹[M].北京：電子工業(yè)出版社，2005.

[2] 孫衛(wèi)琴，李洪成.Tomcat與Java Web開發(fā)技術(shù)詳解[M].北京：電子工業(yè)出版社，2006.

[3] 溫謙，王觶程.別具光芒CSS網(wǎng)頁布局案例剖析[M].北京：人民郵電出版社，2010.

[4] Sanam S，Stefan V.Anticipatory Buffer Control and Resource Allocation for Wireless Video Streaming[J/OL].Video，http：//cn.arxiv.org/pdf/1304.3056v1，2013.

[5] Semih Y， Tracey Ho， Michelle E.Multi-Resolution Video Streaming in Peer-to-peer Networks[J/OL].Multimedia，http：//cn.arxiv.org/pdf/1304.1858v2，2013.endprint

摘要：該文論述基于jsp的網(wǎng)絡(luò)視音頻網(wǎng)站前臺(tái)界面設(shè)計(jì)，介紹從用戶注冊(cè)、登陸、修改個(gè)人資料、收聽音頻、觀看視頻到收藏夾等界面的設(shè)計(jì)與實(shí)現(xiàn)，為網(wǎng)絡(luò)時(shí)代的人們提供方便、快捷的視音頻使用界面。

關(guān)鍵詞：前臺(tái)界面；JSP；視頻；音頻；播放系統(tǒng)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）11-2649-04

1 簡(jiǎn)介

本文論述以B/S架構(gòu)的網(wǎng)站視音頻播放系統(tǒng)前臺(tái)界面設(shè)計(jì)，開發(fā)模式方面采用的是經(jīng)典的MVC模式，前臺(tái)點(diǎn)播方面沒有運(yùn)用struts等框架，考慮到個(gè)人開發(fā)，因此是JSP頁面和Servlet技術(shù)結(jié)合，JSP頁面包含HTML、CSS和JS等語言，本系統(tǒng)開發(fā)所用集成開發(fā)工具為MyEclipse 8.5、網(wǎng)頁設(shè)計(jì)采用Dreamweaver CS6、數(shù)據(jù)庫(kù)為MySQL 5.1，Web服務(wù)器為tomcat 6.0，系統(tǒng)整體盡力追求模塊化，追求“高內(nèi)聚、低耦合”，力求安全性、方便性、實(shí)用性，同時(shí)也嚴(yán)格按照MVC的方式將各個(gè)功能模塊隔離，這樣便于后期維護(hù)和管理。

6.2 視頻下載

視頻下載相對(duì)于視頻上傳來說相對(duì)簡(jiǎn)單同樣采用fileUpload組件來實(shí)現(xiàn)。點(diǎn)擊視頻播放按鈕下的下載按鈕將把視頻的VideoID發(fā)送到VideoDownLoad.java中，然后對(duì)該VideoID進(jìn)行查詢，得到視頻名稱和地址，然后彈出下載選項(xiàng)。

7 收藏夾

在視頻和音頻播放頁面的播放器的下方，有個(gè)收藏按鈕，該按鈕實(shí)現(xiàn)收藏夾功能模塊中的收藏功能。

收藏夾模塊包含兩個(gè)收藏列表顯示文件四個(gè)功能類文件。用戶也可以點(diǎn)擊各頁面中的收藏夾按鈕查看收藏列表，音頻界面和視頻界面只顯示對(duì)應(yīng)界面中的收藏夾內(nèi)容。

因?yàn)橐纛l收藏和視頻收藏原理相同，兩者唯一的區(qū)別就是在音頻收藏夾中有個(gè)播放音頻收藏的按鈕，該按鈕功能在上面小節(jié)已經(jīng)介紹，這里不再贅述?，F(xiàn)在以視頻收藏夾來說明此功能設(shè)計(jì)，音頻收藏夾同理即可。

7.1 收藏功能的實(shí)現(xiàn)

7.2 顯示功能的實(shí)現(xiàn)

查詢uservideo字段中的內(nèi)容，然后將其轉(zhuǎn)化為數(shù)組，對(duì)從CVX[1]開始的數(shù)組內(nèi)容進(jìn)行逐個(gè)查詢，然后顯示到CollectVideo.jsp或者其它頁面視頻收藏夾顯示窗口中

7.3 刪除功能的實(shí)現(xiàn)

點(diǎn)擊收藏夾文件名后方的刪除鏈接時(shí)，會(huì)將請(qǐng)求提交到CVDelete.java，該類會(huì)將顯示收藏夾的數(shù)組重新轉(zhuǎn)化為字符串，但刪除選項(xiàng)的數(shù)組字段將不被加入該字符串，然后上傳到數(shù)據(jù)庫(kù)中，實(shí)現(xiàn)收藏夾刪除功能。

8 前臺(tái)頁面權(quán)限設(shè)置

參考文獻(xiàn)：

[1] 汪孝宜，劉中兵，徐佳晶，等.JSP數(shù)據(jù)庫(kù)開發(fā)實(shí)例精粹[M].北京：電子工業(yè)出版社，2005.

[2] 孫衛(wèi)琴，李洪成.Tomcat與Java Web開發(fā)技術(shù)詳解[M].北京：電子工業(yè)出版社，2006.

[3] 溫謙，王觶程.別具光芒CSS網(wǎng)頁布局案例剖析[M].北京：人民郵電出版社，2010.

[4] Sanam S，Stefan V.Anticipatory Buffer Control and Resource Allocation for Wireless Video Streaming[J/OL].Video，http：//cn.arxiv.org/pdf/1304.3056v1，2013.

[5] Semih Y， Tracey Ho， Michelle E.Multi-Resolution Video Streaming in Peer-to-peer Networks[J/OL].Multimedia，http：//cn.arxiv.org/pdf/1304.1858v2，2013.endprint

摘要：該文論述基于jsp的網(wǎng)絡(luò)視音頻網(wǎng)站前臺(tái)界面設(shè)計(jì)，介紹從用戶注冊(cè)、登陸、修改個(gè)人資料、收聽音頻、觀看視頻到收藏夾等界面的設(shè)計(jì)與實(shí)現(xiàn)，為網(wǎng)絡(luò)時(shí)代的人們提供方便、快捷的視音頻使用界面。

關(guān)鍵詞：前臺(tái)界面；JSP；視頻；音頻；播放系統(tǒng)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）11-2649-04

1 簡(jiǎn)介

本文論述以B/S架構(gòu)的網(wǎng)站視音頻播放系統(tǒng)前臺(tái)界面設(shè)計(jì)，開發(fā)模式方面采用的是經(jīng)典的MVC模式，前臺(tái)點(diǎn)播方面沒有運(yùn)用struts等框架，考慮到個(gè)人開發(fā)，因此是JSP頁面和Servlet技術(shù)結(jié)合，JSP頁面包含HTML、CSS和JS等語言，本系統(tǒng)開發(fā)所用集成開發(fā)工具為MyEclipse 8.5、網(wǎng)頁設(shè)計(jì)采用Dreamweaver CS6、數(shù)據(jù)庫(kù)為MySQL 5.1，Web服務(wù)器為tomcat 6.0，系統(tǒng)整體盡力追求模塊化，追求“高內(nèi)聚、低耦合”，力求安全性、方便性、實(shí)用性，同時(shí)也嚴(yán)格按照MVC的方式將各個(gè)功能模塊隔離，這樣便于后期維護(hù)和管理。

6.2 視頻下載

視頻下載相對(duì)于視頻上傳來說相對(duì)簡(jiǎn)單同樣采用fileUpload組件來實(shí)現(xiàn)。點(diǎn)擊視頻播放按鈕下的下載按鈕將把視頻的VideoID發(fā)送到VideoDownLoad.java中，然后對(duì)該VideoID進(jìn)行查詢，得到視頻名稱和地址，然后彈出下載選項(xiàng)。

7 收藏夾

在視頻和音頻播放頁面的播放器的下方，有個(gè)收藏按鈕，該按鈕實(shí)現(xiàn)收藏夾功能模塊中的收藏功能。

收藏夾模塊包含兩個(gè)收藏列表顯示文件四個(gè)功能類文件。用戶也可以點(diǎn)擊各頁面中的收藏夾按鈕查看收藏列表，音頻界面和視頻界面只顯示對(duì)應(yīng)界面中的收藏夾內(nèi)容。

因?yàn)橐纛l收藏和視頻收藏原理相同，兩者唯一的區(qū)別就是在音頻收藏夾中有個(gè)播放音頻收藏的按鈕，該按鈕功能在上面小節(jié)已經(jīng)介紹，這里不再贅述。現(xiàn)在以視頻收藏夾來說明此功能設(shè)計(jì)，音頻收藏夾同理即可。

7.1 收藏功能的實(shí)現(xiàn)

7.2 顯示功能的實(shí)現(xiàn)

查詢uservideo字段中的內(nèi)容，然后將其轉(zhuǎn)化為數(shù)組，對(duì)從CVX[1]開始的數(shù)組內(nèi)容進(jìn)行逐個(gè)查詢，然后顯示到CollectVideo.jsp或者其它頁面視頻收藏夾顯示窗口中

7.3 刪除功能的實(shí)現(xiàn)

點(diǎn)擊收藏夾文件名后方的刪除鏈接時(shí)，會(huì)將請(qǐng)求提交到CVDelete.java，該類會(huì)將顯示收藏夾的數(shù)組重新轉(zhuǎn)化為字符串，但刪除選項(xiàng)的數(shù)組字段將不被加入該字符串，然后上傳到數(shù)據(jù)庫(kù)中，實(shí)現(xiàn)收藏夾刪除功能。

8 前臺(tái)頁面權(quán)限設(shè)置

參考文獻(xiàn)：

[1] 汪孝宜，劉中兵，徐佳晶，等.JSP數(shù)據(jù)庫(kù)開發(fā)實(shí)例精粹[M].北京：電子工業(yè)出版社，2005.

[2] 孫衛(wèi)琴，李洪成.Tomcat與Java Web開發(fā)技術(shù)詳解[M].北京：電子工業(yè)出版社，2006.

[3] 溫謙，王觶程.別具光芒CSS網(wǎng)頁布局案例剖析[M].北京：人民郵電出版社，2010.

[4] Sanam S，Stefan V.Anticipatory Buffer Control and Resource Allocation for Wireless Video Streaming[J/OL].Video，http：//cn.arxiv.org/pdf/1304.3056v1，2013.

[5] Semih Y， Tracey Ho， Michelle E.Multi-Resolution Video Streaming in Peer-to-peer Networks[J/OL].Multimedia，http：//cn.arxiv.org/pdf/1304.1858v2，2013.endprint