zoukankan      html  css  js  c++  java
  • vlc的应用之六:简单的视频点播系统(B/S)的实现

    前两天帮“猪小妹”考虑毕业设计的时候,想了想视频点播系统的该如何实现。在这写一下自己的想法和非常简单的实现方式,纯属娱乐,请勿拍砖。         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)的实现 - hackbin - 一个人的天空
             6. C/S架构的实现        做成跟pplive类似的客户端,考虑与服务器的两次交流,第二次交流是没有问题的,关键在第一次交流上。如果客户端做成嵌入IE的方式,如C#的WebBrowser,则点击某个视频地址的信息模块,如超链接,无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml,然后解析,然后显示到某个组件里面,如C#的Listbox,这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表,估计就是用的这种方式。
  • 相关阅读:
    PythonのTkinter基本原理
    使用 Word (VBA) 分割长图到多页
    如何使用 Shebang Line (Python 虚拟环境)
    将常用的 VBScript 脚本放到任务栏 (Pin VBScript to Taskbar)
    关于 VBScript 中的 CreateObject
    Windows Scripting Host (WSH) 是什么?
    Component Object Model (COM) 是什么?
    IOS 打开中文 html 文件,显示乱码的问题
    科技发展时间线(Technology Timeline)
    列置换密码
  • 原文地址:https://www.cnblogs.com/qq78292959/p/2076990.html
Copyright © 2011-2022 走看看