杨子祥 林鹏
摘要:随着Internet的发展,网页视频播放的使用越来越多。但是,目前如果直接通过HTML5的
关键词: 流媒体; JSP; Html5; Chrome浏览器; 视频控制
中图分类号:TP37 文献标识码: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的发展,网页视频播放的使用越来越多。因此,视频播放的用户体验也越来越实用;视频的播放、暂停、定点播放等操作的需求也就越来越大,而且也更符合用户实际浏览视频的要求。但是,目前如果直接通过HTML5的
所谓流媒体是指采用流式传输的方式在Internet播放的媒体格式。流媒体又叫流式媒体,它是指商家用一个视频传送服务器把节目当成数据包发出,传送到网络上。用户通过解压设备对这些数据进行解压后,节目就会像发送前那样显示出来。流媒体的出现极大地方便了人们的工作和生活。目前,使用流媒体的话都会通过流媒体服务器(比如Windows Media Services等)来搭建流媒体平台[1-4]。
JSP作为一种网页开发语言,在网站的开发中使用者的比例很大;因此,使用JSP开发的网站对视频播放的需求也会越来越多。但是,如果直接通过JSP后台平台结合HTML5的
2 基于流媒体服务器的网页播放探究
流媒体服务器的使用,解决了视频播放过程中,直接访问网络视频资源导致的视频拖拽问题。因此,流媒体服务器的网页视频资源的访问方式对于本文的设计来说,具有很大的价值。Windows Media Services作为一种流媒体服务器,是Windows Server服务器系统中使用频率很高而且性能很好的流媒体服务器。本文通过Chrome浏览器访问Windows Media Services中视频资源的流程研究发现,在视频拖拽的控制中,Chrome浏览器都会发送Http请求包;Windows Media Services接收到浏览器的请求后,再根据Http中包含的内容返回相应的视频片段。具体的流程如图1所示。
如图1中流媒体视频在Chrome浏览器和Windows Media Services流媒体服务器之间的交互可以看出,无论视频的播放还是中间视频播放控制,都是Chrome发送Http包进行控制;而Windows Media Services流媒体服务器则是负责对视频片段的返回。因此,本文使用Chrome浏览器访问对已经发布在Windows Media Services流媒体服务器中的视频,通过Chrome浏览器中的Network网络工具,对Http包进行抓取。图2中显示的是视频点击开始播放后,即视频从头开始播放,抓取的Http请求包的头文件内容。图3和图4中显示的则是视频播放过程中点击视频任意位置后,抓取的Http请求包的头文件内容。
客服热线:400-656-5456 客服专线:010-56265043 电子邮箱:longyuankf@126.com
电信与信息服务业务经营许可证:京icp证060024号
Dragonsource.com Inc. All Rights Reserved
3 基于JSP的在线流媒体播放的实现
在第二节中,本文通过Chrome的Http包的追踪功能,截取了视频在播放控制过程中不同播放位置请求的包。通过图2、图3和图4的追踪结果可以看到他们的Request Headers以及Response Headers中的部分头文件字段是不同的,具体的信息比较如表1所示。
由表1中可以看到,三个图中的Http包中只有Range、Content-Range字段是不同的,其他的字段的内容根本就没有发生变化。其中,Range是Request Headers中的字段,Content-Range是Response Headers中的字段。在表1中还可以发现,Content-Range字段的内容和Range字段的内容有一定的关系;Content-Range内容中“-”前的数值和Range是一致的。同时,在表1中也可以发现,Content-Range字段和Content-Length字段有一定的关系;Content-Range内容中“/”后的数值和Content-Length是一致的。我们知道,Http包中的Content-Length的作用主要是记录文件的长度,因此可以在服务器端通过程序求出文件的大小。
由于Http包中的Request Headers是由浏览器进行发出并封装的,因此本文的程序无法控制包中的Request Headers内容。但是,Http包中的Response Headers是由服务器封装后返回给浏览器的;因此,本文的程序设计将会根据Http包中的Request Headers字段内容,对Http包中的Response Headers字段进行封装返回给服务器。根据以上的分析,本文通过JSP进行程序设计如下:
@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,内容是" + 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; }
在本文的程序设计中,浏览器的视频请求URL路径的后端是通过JSP中的Spring框架进行控制,在路径中的/videos/{paths}即是视频路径存储在磁盘的相对位置;在程序中,视频的读取并没有经过中间的流媒体服务器,而是直接读取在磁盘中的视频文件。经过程序发布在Tomcat7上测试之后,视频在播放的过程中,用户可以根据需求随意拖拽,解决了Html5中
4 结论
本文通过分析Windows Media Services流媒体服务器中视频拖拽播放控制过程中,Chrome浏览器发送的Http包的信息,得出了浏览器播放视频时播放控制和Http包中Request Headers、Response Headers头文件的关系。并且,本文通过JSP程序语言的设计,成功实现了流媒体服务器控制视频播放的原理。本文设计的程序发布到Tomcat后,经过该程序访问的视频都可以在浏览器端随意拖拽播放视频,解决了Html5的
参考文献:
[1] 蒋太杰. Windows Media Services及其在远程教育中的应用[J]. 指挥技术学院学报, 2001, 12(6): 81-85.
[2] 王雪婷, 于勇. Windows Media Services流媒体技术与实现[J]. 信息技术与信息化, 2006(1): 51-53+64.
[3] 李学俊. Windows Media Services及其在远程教育中的应用[J]. 现代远程教育研究, 2002(3): 27-29.
[4] 高剑. 利用Windows Media流媒体技术构建网络直播系统[J]. 中国高新技术企业, 2010(30): 62-64.