vlc的应用之六:简单的视频点播系统(B/S)的实现

时间:2022-04-19 06:02:19

原文地址:http://jeremiah.blog.51cto.com/539865/161433/



        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           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."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。         mp3好说,ts怎么得到呢?这时候vlc就出场了。vlc有转换保存功能,媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放,勾选文件并且浏览得到个文件名,注意后缀为ts而不是ps,方案封装选MPEG-TS,然后点击save。把你选择的视频播放一遍之后,ts格式的文件就生成好了。         将生成好的ts文件和网上下载的mp3放到d:/video下面,本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。           4. web页面代码         本web页面代码是vlc的Activex测试代码test.html上修改精简的。(没写注释,因为看着不难。) vod.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script> 
var itemId = 0; 
function getVLC(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); 
        } 


function doGo(mrl) 

        var vlc = getVLC("vlc"); 
        itemId=vlc.playlist.add(mrl); 
        vlc.playlist.playItem(itemId); 
        document.getElementById("btn_stop").disabled = false; 


function updateVolume(deltaVol) 

        var vlc = getVLC("vlc"); 
        vlc.audio.volume += deltaVol; 


function doPlay() 

        vlc.playlist.playItem(itemId); 
         
        document.getElementById("btn_stop").disabled = false; 
        document.getElementById("btn_play").disabled = true; 


function doStop() 

        getVLC("vlc").playlist.stop(); 
        document.getElementById("btn_stop").disabled = true; 
        document.getElementById("btn_play").disabled = false; 

</script> 
</head> 
<body> 
<div style="margin: 50px"> 
        <a title="rtsp://172.16.128.8/01.ts" href="#" onclick="doGo(this.title);return false;">01.ts</a> 
        <span style="margin: 20px;" /> 
        <a title="rtsp://172.16.128.8/02.mp3" href="#" onclick="doGo(this.title);return false;">02.mp3</a> 
        <span style="margin: 20px;" /> 
</div> 
<div> 
        <object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921" 
                width="640" 
                height="480" 
                id="vlc" 
                events="true"> 
        <param name="mrl" value="" /> 
        <param name="showdisplay" value="true" /> 
        <param name="autoloop" value="false" /> 
        <param name="autoplay" value="false" /> 
        <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="640" 
                     height="480" 
                     name="vlc"> 
        </embed> 
        </object> 
</div> 
<div> 
<input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true"> 
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true"> 
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'> 
<input type=button value="减小音量" onclick='updateVolume(-10)'> 
<input type=button value="增加音量" onclick='updateVolume(+10)'> 
</div> 
</body> 
</html>
将vod.html放置到Web服务器中。我就不多说了。so简单。         5. 访问vod.html        访问前请确保客户端Activex控件已注册成功。        打开IE输入http://172.16.128.8:8080/vod/vod.html后访问到我们上面写的页面。然后点击01.ts超链接,在下面的vlc的Activex上就会显示视频了。这样,一个简单的点播系统就做好了。请注意下面图片的视频上的地址。vlc的应用之六:简单的视频点播系统(B/S)的实现         6. C/S架构的实现        做成跟pplive类似的客户端,考虑与服务器的两次交流,第二次交流是没有问题的,关键在第一次交流上。如果客户端做成嵌入IE的方式,如C#的WebBrowser,则点击某个视频地址的信息模块,如超链接,无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml,然后解析,然后显示到某个组件里面,如C#的Listbox,这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表,估计就是用的这种方式。

        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         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."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。        mp3好说,ts怎么得到呢?这时候vlc就出场了。vlc有转换保存功能,媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放,勾选文件并且浏览得到个文件名,注意后缀为ts而不是ps,方案封装选MPEG-TS,然后点击save。把你选择的视频播放一遍之后,ts格式的文件就生成好了。        将生成好的ts文件和网上下载的mp3放到d:/video下面,本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。         4. web页面代码        本web页面代码是vlc的Activex测试代码test.html上修改精简的。(没写注释,因为看着不难。)vod.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script> 
var itemId = 0; 
function getVLC(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); 
        } 


function doGo(mrl) 

        var vlc = getVLC("vlc"); 
        itemId=vlc.playlist.add(mrl); 
        vlc.playlist.playItem(itemId); 
        document.getElementById("btn_stop").disabled = false; 


function updateVolume(deltaVol) 

        var vlc = getVLC("vlc"); 
        vlc.audio.volume += deltaVol; 


function doPlay() 

        vlc.playlist.playItem(itemId); 
         
        document.getElementById("btn_stop").disabled = false; 
        document.getElementById("btn_play").disabled = true; 


function doStop() 

        getVLC("vlc").playlist.stop(); 
        document.getElementById("btn_stop").disabled = true; 
        document.getElementById("btn_play").disabled = false; 

</script> 
</head> 
<body> 
<div style="margin: 50px"> 
        <a title="rtsp://172.16.128.8/01.ts" href="#" onclick="doGo(this.title);return false;">01.ts</a> 
        <span style="margin: 20px;" /> 
        <a title="rtsp://172.16.128.8/02.mp3" href="#" onclick="doGo(this.title);return false;">02.mp3</a> 
        <span style="margin: 20px;" /> 
</div> 
<div> 
        <object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921" 
                width="640" 
                height="480" 
                id="vlc" 
                events="true"> 
        <param name="mrl" value="" /> 
        <param name="showdisplay" value="true" /> 
        <param name="autoloop" value="false" /> 
        <param name="autoplay" value="false" /> 
        <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="640" 
                     height="480" 
                     name="vlc"> 
        </embed> 
        </object> 
</div> 
<div> 
<input type=button id="btn_play" value=" 播放 " onClick='doPlay();' disabled="true"> 
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true"> 
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'> 
<input type=button value="减小音量" onclick='updateVolume(-10)'> 
<input type=button value="增加音量" onclick='updateVolume(+10)'> 
</div> 
</body> 
</html>
将vod.html放置到Web服务器中。我就不多说了。so简单。         5. 访问vod.html        访问前请确保客户端Activex控件已注册成功。        打开IE输入http://172.16.128.8:8080/vod/vod.html后访问到我们上面写的页面。然后点击01.ts超链接,在下面的vlc的Activex上就会显示视频了。这样,一个简单的点播系统就做好了。请注意下面图片的视频上的地址。vlc的应用之六:简单的视频点播系统(B/S)的实现         6. C/S架构的实现        做成跟pplive类似的客户端,考虑与服务器的两次交流,第二次交流是没有问题的,关键在第一次交流上。如果客户端做成嵌入IE的方式,如C#的WebBrowser,则点击某个视频地址的信息模块,如超链接,无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml,然后解析,然后显示到某个组件里面,如C#的Listbox,这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表,估计就是用的这种方式。