蘇兵

（廣州華夏職業(yè)學院，廣東 廣州 510935）

1 緒論

隨著移動網(wǎng)絡技術的飛速發(fā)展和移動智能終端軟件和硬件的不斷更新?lián)Q代，人們越來越多地使用移動終端來享受移動網(wǎng)絡提供的各種各樣的信息服務。近年來，Android移動終端的普及和流媒體技術向移動終端的延伸，極大地促進了移動終端視頻應用的發(fā)展，使人們隨時隨地通過移動網(wǎng)絡觀看視頻和上傳視頻。本系統(tǒng)選用Eclipse開發(fā)移動應用APP，分別從應用的界面設計和功能設計兩個方面進行陳述；而服務器部署了Tomcat，將設計好的流媒體視頻部署到Tomcat；移動端與服務器端之間的通訊采用HTTP技術。

2 影音播放器的設計

影音播放器的設計包括：系統(tǒng)框架設計、移動端的界面設計和功能設計、服務器的設計。

2.1 系統(tǒng)框架設計

影音播放器的框架設計分為基于Android的移動端的App設計和基于Tomcat的服務器端的設計，它們之間的通訊采用HTTP1.1，如圖1所示。

本系統(tǒng)選用Eclipse開發(fā)環(huán)境逐步完成系統(tǒng)各個部分的實現(xiàn)，重點對用戶界面的實現(xiàn)、視頻播放模塊的實現(xiàn)、播放進度控制的實現(xiàn)、基于Tomcat技術的Web服務器和流媒體服務器的搭建和部署進行分析。

2.2 界面設計和功能設計

首頁和更多主要為影片分類和列表，列表部分使用了GridView。首頁和更多的功能主要是展示影片信息，首先通過HttpClient請求到網(wǎng)絡資源，然后通過Json解析后使用Adapter裝載數(shù)據(jù)。

播放界面主要由VideoView和ProgressBar兩個控件組成。外層為RelativeLayout，使ProgressBar可以在VideoView控件上層并居中顯示。播放功能使用VideoView控件，該控件內(nèi)部為MediaPlayer和SurfaceView控件的封裝，使用該控件的主要流程為初始化控件，裝入url，設置監(jiān)聽。首頁、更多和播放的設計如圖1所示。

圖1 播放器的框架設計

圖2 播放器的界面設計和功能設計

2.3 服務器端的設計

服務器端采用Tomcat進行搭建，用于部署使用JSP建好的網(wǎng)站，在網(wǎng)站內(nèi)使用Json來存儲和表示數(shù)據(jù)。

3 影音播放器的開發(fā)

3.1 界面開發(fā)和功能開發(fā)

3.1.1 界面開發(fā)

主界面框架為標題、底部導航加Fragment，F(xiàn)ragment是自定義加載到LinearLayout上，所以此處的LinearLayout需要加ID，其大綱結構圖如圖3所示。

圖3 主界面開發(fā)大綱結構

首頁Fragment開發(fā)主要包括視頻的分類展示，每一個分類下都是使用GridView，并設定個數(shù)。單擊更多按鈕會跳轉到對應分類下的界面。單擊GridView下的每一個item返回服務器請求數(shù)據(jù)，播放視頻，其大綱結構如圖4所示。

圖4 首頁界面開發(fā)大綱結構

播放界面的開發(fā)使用了VideoView控件完成視頻的播放，加載視頻時在VideoView上放置ProgressBar和TextView提示用戶，其大綱結構如圖5所示。

圖5 播放界面開發(fā)大綱結構

其它界面的開發(fā)類似，在此不再陳述。

3.1.2 功能開發(fā)

（1）主界面功能開發(fā)

首先，聲明兩個子布局和底部導航的四個控件以及標題。

其次，初始化界面并將界面的上下文存入GloableParams類中，以便其他頁面的調(diào)用。調(diào)用初始化控件和監(jiān)聽的方法。

然后，初始化兩個子布局，將homeFragment加入主界面。

接著，設置底部導航圖上的監(jiān)聽。

最后，對其它所需的功能進行實現(xiàn)即可。

（2）首頁功能開發(fā)

首先，主界面默認加載的是homeFragment,即首頁。在onCreateView方法中進行控件和適配器的綁定。

其次，TextView控件更多的單擊監(jiān)聽。單擊后得到服務器請求的URI放入Bundle對象中，在加載更多頁面時傳遞過去。

然后，得到服務器請求的URI調(diào)用NetWorkTask().executeProxy異步方法請求服務器。將監(jiān)聽的上下文賦值給params.listener，傳入調(diào)用的方法中。

接著，進行網(wǎng)絡判斷，如果當前網(wǎng)絡不正常，調(diào)用Prom t-Manager.showNoNetWork(mContext)；檢查是否有網(wǎng)絡。若網(wǎng)絡狀態(tài)良好，則調(diào)用super.execute(params)進行服務器請求。此過程中彈出進度條對話框提示資源加載中。

在此方法中，將之前設置的上下文賦給this.onResultListener就可以在當前頁面調(diào)用首頁面。

最后，加載其它的所需資源，即可實現(xiàn)首頁的信息顯示功能。更多界面的功能開發(fā)與首頁類似。

（3）視頻播放界面功能開發(fā)

首先，單擊首頁上的任務item會進入視頻播放界面，該界面使用videoView播放視頻，videoView內(nèi)部對Mediaplayer和SurfaceView進行了封裝。

3.2 服務器端的實現(xiàn)

采用JSP技術新建一個JSP網(wǎng)站，加載相應的圖片、視頻和Json文檔等等，測試成功后，將該網(wǎng)站部署到Tomcat服務器上。

3.2.1 安裝JDK和Tomcat

（1）安裝JDK：直接運行jdk-7-w indows-i586.exe可執(zhí)行程序，默認安裝即可。

備注：路徑可以其他盤符，不建議路徑包含中文名及特殊符號。

（2）安裝Tomcat：直接解壓縮下載文件“apache-tomcat-7.0.33-w indows-x86.zip”到C盤下。安裝路徑建議修改為：c: omcat。

3.2.2 配置JDK環(huán)境變量和測試JDK

（1）新建變量名：JAVA_HOME，變量值：C:Program FilesJavajdk1.7.0

（2）打開PATH和添加變量值：%JAVA_HOME%in;%JAVA_HOME%jrein

（3）新 建 變 量 名 ：CLASSPATH，變 量 值 ：.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar

（4）測試JDK：在CMD命令下輸入javac，java，javadoc命令，出現(xiàn)圖6界面，表示安裝成功。

圖6 成功測試JDK

3.2.3 配置Tomcat環(huán)境變量、啟動Tomcat和測試Tomcat

（1）新建變量名：CATALINA_BASE，變量值：C: omcat

（2）新建變量名：CATALINA_HOME，變量值：C: omcat

（3）打開PATH，添加變量值：%CATALINA_HOME%lib;%CATALINA_HOME%in

（4）啟動Tomcat服務的兩種方法：方法一：在CMD命令下輸入命令：startup，出現(xiàn)圖7對話框，表明服務啟動成功；方法二：右鍵點擊桌面上的“我的電腦”-＞“管理”-＞“服務和應用程序”-＞“服務”，找到“Apache Tomcat”服務，右鍵點擊該服務，選擇“屬性”，將“啟動類型”由“手動”改成“自動”。

（5）測試Tom cat：打開瀏覽器，在地址欄中輸入http://localhost:8080回車，如果看到Tomcat自帶的一個JSP頁面，說明JDK和Tomcat已搭建成功。

圖7 CMD命令下成功測試JDK

4 影音播放器的測試

該影音播放器是分別采用Eclipse模擬器和真機進行測試，經(jīng)過多次的界面和功能修改，并完善Tomcat服務器，完成了視頻播放器的基本框架與圖片的緩存加載，實現(xiàn)了基本視頻格式文件的播放功能，如圖8所示。

圖8 影音播放器的測試效果圖

5 結束語

本文的實現(xiàn)分為服務器和客戶端兩部分：

（1）服務器部分主要為含有URI等信息的Json數(shù)據(jù)、圖片信息和不同格式的視頻資源。

（2）客戶端主要由fragment頁面框架和視頻播放兩部分組成。

頁面框架部分包括首頁和更多：

（1）首頁上的圖片資源為直接從服務器獲取，需要對圖片進行一定的處理。

（2）更多頁面上的圖片資源是直接請求的百度服務器，每次請求獲得一定的圖片并顯示在界面上。因為圖片量較大必須對緩存進行一定的處理，否則就會產(chǎn)生OOM(Out-Of-Memory)。