开发学院操作系统windows 2008 vlc的应用之六:简单的视频点播系统(B/S)的实现 阅读

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

 2009-10-24 00:00:00 来源:WEB开发网   
核心提示: "Play streams from this server using the URLrtsp://172.16.128.8/<filename>where <filename> is a file present in the current directo

"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="#" >01.ts</a>
        <span style="margin: 20px;" />
        <a title="rtsp://172.16.128.8/02.mp3" href="#" >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=" 播放 "  disabled="true">
<input type=button id="btn_stop" value="停止"  disabled="true">
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
<input type=button value="减小音量" >
<input type=button value="增加音量" >
</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上就会显示视频了。这样,一个简单的点播系统就做好了。

6. C/S架构的实现

做成跟pplive类似的客户端,考虑与服务器的两次交流,第二次交流是没有问题的,关键在第一次交流上。如果客户端做成嵌入IE的方式,如C#的 WebBrowser,则点击某个视频地址的信息模块,如超链接,无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与 Web服务器的交流可以用xml来实现。客户端获取xml,然后解析,然后显示到某个组件里面,如C#的Listbox,这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表,估计就是用的这种方式。

出处: http://jeremiah.blog.51cto.com/539865/161433

上一页  1 2 

Tags:vlc 应用 简单

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接