1. 大体的架构及流程
实现视频点播系统,B/S架构,服务端至少应该是两个服务器:流媒体服务器,web服务器。客户端则就是web页面。当开启页面后则是客户端和服务器的第一次交互,通过http协议得到页面。里面会有流媒体地址的信息,浏览器里面点击显示视频组件,将流媒体的地址传给流媒体播放器,并启动播放器去请求视频。这是第二次交互。服务器端流媒体服务器发送流给客户端,页面上播放就okay了。
2. 环境及所需软件
Jeremiah的测试环境是xp sp2及IE8浏览器。IP地址:172.16.128.8. 与IP有关的地址,请根据个人情况自己改。
服务端:
流媒体服务器先用个简单的:live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
Web服务器:Jeremiah以前学的JAVA,所以用Tomcat。IIS或者其他的Web服务器都可以。其实Jeremiah这个小系统用的是静态页面,所以如果是在本机测试的话,不用Web服务器也是okay的。模拟本地打开为Web浏览。
客户端:vlc-0.9.4的Activex。需要把Activex注册好(参考http://jeremiah.blog.51cto.com/539865/115943)
注:下载vlc-0.8.6i-win32安装即可
3. 配置流媒体服务器
下载完live555 Media Server之后放到d:/video下面,启动时会有以下信息:
"Play streams from this server using the URL
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
并且后面还会有live555支持的视频格式。
本测试就用的mp3和ts格式。其他格式没有试验过。
mp3好说,ts怎么得到呢?这时候vlc就出场了。vlc有转换保存功能,媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放,勾选文件并且浏览得到个文件名,注意后缀为ts而不是ps,方案封装选MPEG-TS,然后点击save。把你选择的视频播放一遍之后,ts格式的文件就生成好了。
将生成好的ts文件和网上下载的mp3放到d:/video下面,本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。
4. web页面代码(login.jsp)
<%@ page language="java" import="supervision.bean.MyReceive;" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">
<head>
<script language="javascript">
function getVLC(name)
{ alert(name);
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else
{
return document.getElementById(name);
}
}
</script>
</head>
<body>
<br/><br/>
<div align="center">
</head>
<body>
<br/><br/>
<div align="center">
<input type=button value="静音切换1" οnclick='getVLC("vlc1").audio.togglemute();'>
<input type=button value="静音切换2" οnclick='getVLC("vlc2").audio.togglemute();'>
<input type=button value="静音切换3" οnclick='getVLC("vlc3").audio.togglemute();'>
<input type=button value="静音切换4" οnclick='getVLC("vlc4").audio.togglemute();'>
<input type=button value="静音切换5" οnclick='getVLC("vlc5").audio.togglemute();'>
<input type=button value="静音切换6" οnclick='getVLC("vlc6").audio.togglemute();'>
<input type=button value="静音切换2" οnclick='getVLC("vlc2").audio.togglemute();'>
<input type=button value="静音切换3" οnclick='getVLC("vlc3").audio.togglemute();'>
<input type=button value="静音切换4" οnclick='getVLC("vlc4").audio.togglemute();'>
<input type=button value="静音切换5" οnclick='getVLC("vlc5").audio.togglemute();'>
<input type=button value="静音切换6" οnclick='getVLC("vlc6").audio.togglemute();'>
</div>
<br/>
<table align="center" width="80%"><tr>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc1"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/2.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc1">
</embed>
</object>
</td>
<td align="center">
<br/>
<table align="center" width="80%"><tr>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc1"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/2.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc1">
</embed>
</object>
</td>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc2"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/1.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc2">
</embed>
</object>
</td><td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc3"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/3.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc3">
</embed>
</object>
</td></tr><tr>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc4"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/4.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc4">
</embed>
</object>
</td>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc5"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/2.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc5">
</embed>
</object>
width="275"
height="220"
id="vlc2"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/1.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc2">
</embed>
</object>
</td><td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc3"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/3.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc3">
</embed>
</object>
</td></tr><tr>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc4"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/4.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc4">
</embed>
</object>
</td>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc5"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/2.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc5">
</embed>
</object>
</td>
<td align="center">
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="275"
height="220"
id="vlc6"
events="true">
<param name="mrl" value=" http://jdeps:9090/supervision/sound/1.wmv" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="true" />
<param name="autoplay" value="true" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage=" http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="275"
height="220"
name="vlc6">
</embed>
</object>
</td>
</tr></table>
</body>
</html>
</html>
运行即可