楊子祥 林鵬
摘要:隨著Internet的發(fā)展,網(wǎng)頁視頻播放的使用越來越多。但是,目前如果直接通過HTML5的
關(guān)鍵詞: 流媒體; JSP; Html5; Chrome瀏覽器; 視頻控制
中圖分類號:TP37 文獻標(biāo)識碼:A 文章編號:1009-3044(2016)18-0191-03
Design and Implementation of Playing Streaming Media Based On JSP
YANG Zi-xiang,LIN Peng
(Tianjin Open University, Tianjin 300191, China)
Abstract: With the development of Internet, playing web video is more and more on web. However, if playing the video through the HTML5
Key words:Streaming Media; JSP; Html5; Chrome browser; Video Control
1 概述
隨著Internet的發(fā)展,網(wǎng)頁視頻播放的使用越來越多。因此,視頻播放的用戶體驗也越來越實用;視頻的播放、暫停、定點播放等操作的需求也就越來越大,而且也更符合用戶實際瀏覽視頻的要求。但是,目前如果直接通過HTML5的
所謂流媒體是指采用流式傳輸?shù)姆绞皆贗nternet播放的媒體格式。流媒體又叫流式媒體,它是指商家用一個視頻傳送服務(wù)器把節(jié)目當(dāng)成數(shù)據(jù)包發(fā)出,傳送到網(wǎng)絡(luò)上。用戶通過解壓設(shè)備對這些數(shù)據(jù)進行解壓后,節(jié)目就會像發(fā)送前那樣顯示出來。流媒體的出現(xiàn)極大地方便了人們的工作和生活。目前,使用流媒體的話都會通過流媒體服務(wù)器(比如Windows Media Services等)來搭建流媒體平臺[1-4]。
JSP作為一種網(wǎng)頁開發(fā)語言,在網(wǎng)站的開發(fā)中使用者的比例很大;因此,使用JSP開發(fā)的網(wǎng)站對視頻播放的需求也會越來越多。但是,如果直接通過JSP后臺平臺結(jié)合HTML5的
2 基于流媒體服務(wù)器的網(wǎng)頁播放探究
流媒體服務(wù)器的使用,解決了視頻播放過程中,直接訪問網(wǎng)絡(luò)視頻資源導(dǎo)致的視頻拖拽問題。因此,流媒體服務(wù)器的網(wǎng)頁視頻資源的訪問方式對于本文的設(shè)計來說,具有很大的價值。Windows Media Services作為一種流媒體服務(wù)器,是Windows Server服務(wù)器系統(tǒng)中使用頻率很高而且性能很好的流媒體服務(wù)器。本文通過Chrome瀏覽器訪問Windows Media Services中視頻資源的流程研究發(fā)現(xiàn),在視頻拖拽的控制中,Chrome瀏覽器都會發(fā)送Http請求包;Windows Media Services接收到瀏覽器的請求后,再根據(jù)Http中包含的內(nèi)容返回相應(yīng)的視頻片段。具體的流程如圖1所示。
如圖1中流媒體視頻在Chrome瀏覽器和Windows Media Services流媒體服務(wù)器之間的交互可以看出,無論視頻的播放還是中間視頻播放控制,都是Chrome發(fā)送Http包進行控制;而Windows Media Services流媒體服務(wù)器則是負責(zé)對視頻片段的返回。因此,本文使用Chrome瀏覽器訪問對已經(jīng)發(fā)布在Windows Media Services流媒體服務(wù)器中的視頻,通過Chrome瀏覽器中的Network網(wǎng)絡(luò)工具,對Http包進行抓取。圖2中顯示的是視頻點擊開始播放后,即視頻從頭開始播放,抓取的Http請求包的頭文件內(nèi)容。圖3和圖4中顯示的則是視頻播放過程中點擊視頻任意位置后,抓取的Http請求包的頭文件內(nèi)容。
客服熱線:400-656-5456??客服專線:010-56265043??電子郵箱:longyuankf@126.com
電信與信息服務(wù)業(yè)務(wù)經(jīng)營許可證:京icp證060024號
Dragonsource.com Inc. All Rights Reserved
3 基于JSP的在線流媒體播放的實現(xiàn)
在第二節(jié)中,本文通過Chrome的Http包的追蹤功能,截取了視頻在播放控制過程中不同播放位置請求的包。通過圖2、圖3和圖4的追蹤結(jié)果可以看到他們的Request Headers以及Response Headers中的部分頭文件字段是不同的,具體的信息比較如表1所示。
由表1中可以看到,三個圖中的Http包中只有Range、Content-Range字段是不同的,其他的字段的內(nèi)容根本就沒有發(fā)生變化。其中,Range是Request Headers中的字段,Content-Range是Response Headers中的字段。在表1中還可以發(fā)現(xiàn),Content-Range字段的內(nèi)容和Range字段的內(nèi)容有一定的關(guān)系;Content-Range內(nèi)容中“-”前的數(shù)值和Range是一致的。同時,在表1中也可以發(fā)現(xiàn),Content-Range字段和Content-Length字段有一定的關(guān)系;Content-Range內(nèi)容中“/”后的數(shù)值和Content-Length是一致的。我們知道,Http包中的Content-Length的作用主要是記錄文件的長度,因此可以在服務(wù)器端通過程序求出文件的大小。
由于Http包中的Request Headers是由瀏覽器進行發(fā)出并封裝的,因此本文的程序無法控制包中的Request Headers內(nèi)容。但是,Http包中的Response Headers是由服務(wù)器封裝后返回給瀏覽器的;因此,本文的程序設(shè)計將會根據(jù)Http包中的Request Headers字段內(nèi)容,對Http包中的Response Headers字段進行封裝返回給服務(wù)器。根據(jù)以上的分析,本文通過JSP進行程序設(shè)計如下:
@RequestMapping(value = { "/videos/{path}" })
public String displayVideo(HttpServletRequest request,
HttpServletResponse response, @PathVariable String path) {
try {String filePath = videoDir + path + ".mp4";
File file = new File(filePath);
if (!file.exists()) {
response.sendError(404);
LOG.error("未找到文件" + file.getCanonicalPath());}
Long fileLength = file.length();
LOG.debug("文件找到了,大小為" + fileLength);
String range = request.getHeader("range");
if (range != null && !range.equals("")) {
LOG.debug("請求的名字是range,內(nèi)容是" + range); }
Long startPos = 0l;
if (range != null && !range.equals("")) {
Pattern pattern = Pattern
.compile("^bytes\\=(\\d+)(?:\\-(\\d+)?)?$");
Matcher matcher = pattern.matcher(range);
LOG.debug(matcher.matches());
startPos = Long.parseLong(matcher.group(1), 10);
LOG.debug("成功截獲range,開始位置是" + startPos);
response.setStatus(206);
} else {
response.setStatus(200);
LOG.debug("從頭開始傳送");}
InputStream is = new FileInputStream(file);
OutputStream os = response.getOutputStream();
byte[] buffer = new byte[1024];
response.addHeader("Content-Range", "bytes " + startPos + "-"
+ (fileLength - 1) + "/" + fileLength);
response.addHeader("Content-Length", fileLength.toString());
response.setCharacterEncoding("UTF-8");
response.setContentType("video/mp4");
response.setHeader("Accept-Ranges", "bytes");
is.skip(startPos);
int length = is.read(buffer);
while (length > 0) {
os.write(buffer, 0, length);
length = is.read(buffer); }
os.flush();
os.close();
is.close();
} catch (Exception err) {
if (err.getClass()
.getName()
.equals("org.apache.catalina.connector.ClientAbortException")) {
LOG.debug("客戶掛斷了");
} else {
err.printStackTrace();}}
return null; }
在本文的程序設(shè)計中,瀏覽器的視頻請求URL路徑的后端是通過JSP中的Spring框架進行控制,在路徑中的/videos/{paths}即是視頻路徑存儲在磁盤的相對位置;在程序中,視頻的讀取并沒有經(jīng)過中間的流媒體服務(wù)器,而是直接讀取在磁盤中的視頻文件。經(jīng)過程序發(fā)布在Tomcat7上測試之后,視頻在播放的過程中,用戶可以根據(jù)需求隨意拖拽,解決了Html5中
4 結(jié)論
本文通過分析Windows Media Services流媒體服務(wù)器中視頻拖拽播放控制過程中,Chrome瀏覽器發(fā)送的Http包的信息,得出了瀏覽器播放視頻時播放控制和Http包中Request Headers、Response Headers頭文件的關(guān)系。并且,本文通過JSP程序語言的設(shè)計,成功實現(xiàn)了流媒體服務(wù)器控制視頻播放的原理。本文設(shè)計的程序發(fā)布到Tomcat后,經(jīng)過該程序訪問的視頻都可以在瀏覽器端隨意拖拽播放視頻,解決了Html5的
參考文獻:
[1] 蔣太杰. Windows Media Services及其在遠程教育中的應(yīng)用[J]. 指揮技術(shù)學(xué)院學(xué)報, 2001, 12(6): 81-85.
[2] 王雪婷, 于勇. Windows Media Services流媒體技術(shù)與實現(xiàn)[J]. 信息技術(shù)與信息化, 2006(1): 51-53+64.
[3] 李學(xué)俊. Windows Media Services及其在遠程教育中的應(yīng)用[J]. 現(xiàn)代遠程教育研究, 2002(3): 27-29.
[4] 高劍. 利用Windows Media流媒體技術(shù)構(gòu)建網(wǎng)絡(luò)直播系統(tǒng)[J]. 中國高新技術(shù)企業(yè), 2010(30): 62-64.