最有效的插件,可以在具有良好浏览器兼容性的网页上播放Rtsp流

时间:2011-06-02 06:46:29

标签: javascript html ajax rtsp

以下是我的代码概述。 用户按下一个记录按钮,它会点击服务器启动监控流,然后返回一个我想在网站上播放的rtsp网址。

我尝试过vlc插件,但下面的代码会产生后面提到的问题似乎不可靠。

实现此功能的任何其他想法都非常受欢迎。

  xmlhttp.onreadystatechange  = function()
    {
     if (xmlhttp.readyState == 4) {
       if(xmlhttp.status == 200) {
         res_array = xmlhttp.responseText.split("#");
         session_id = res_array[0];
        alert(res_array.length);
         if (res_array.length == 4)
         {
             document.getElementById("jsession").innerHTML = xmlhttp.responseText;
             rstp_url = res_array[1];
             jsession_id = res_array[2];
             var vid_tag = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"';
             vid_tag += ' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"' ;
             vid_tag += ' width="320" height="240" id="vlc" events="True"> <param name="Src" value=" ' + rstp_url +' " /> ';
             vid_tag += ' <param name="ShowDisplay" value="True" /> <param name="AutoLoop" value="False" /><param name="AutoPlay" value="True" />' ;
             vid_tag += '<EMBED pluginspage="http://www.videolan.org" type="application/x-vlc-plugin" progid="VideoLAN.VLCPlugin.2" width="320" height="240"' ;
             vid_tag +=' autoplay="yes" loop="no" target="'+rstp_url+'" name="vlc"> </EMBED></OBJECT>';
             document.getElementById("StopRecording").disabled = false;
             document.getElementById("StartRecording").disabled = true;
             document.getElementById("StopPlayback").visible = false;
             document.getElementById("Playback").disabled = true;
             alert(vid_tag);
             document.getElementById("video_handler").innerHTML = vid_tag;
             document.getElementById("jsession").innerHTML = xmlhttp.responseText;//Update the HTML Form element
         }
         else
            {
             alert("Make sure usename,password and deviceref is correct");
            }
       }
       else {
          alert("Error during AJAX call. Please try again");
       }
     }
};

以下是我遇到的问题。

  • 不在IE6中工作。
  • 流播放不可靠。它有时播放,有时不播放。修复此问题的唯一正确方法似乎是在res_array长度之后添加一个警告框,如果检查
  • 即使尝试播放音频源,也会出现播放视频的黑匣子。

P.S。如果我尝试使用HTML5并且我知道jquery等框架,这会变得更容易吗,但是我不可能在这个项目中使用它。

3 个答案:

答案 0 :(得分:2)

如果我正确地读到这个,听起来它总是显示流,但并不总是自动播放,对吗?我猜这是一个时间问题,对象试图在它完全写入页面的对象之前自动播放。如果是这种情况,设置autoplay = false然后在创建对象后调用controlname.play来解决问题吗?

答案 1 :(得分:2)

由于您未提及操作系统: 另一个仅限Windows的选项是编写自己的RTSP DirectShow源过滤器。然后可以为RTSP协议注册这样的过滤器。在网页上,您可以通过以下方式插入:

<div id="mtvPlayer"> 
    <embed 
        type="application/x-mplayer2" 
        pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
        name="mediaplayer1" 
        ShowStatusBar="true" 
        EnableContextMenu="false" 
        autostart="true" 
        loop="false" 
        src="rtsp://<<RTSP URI>>" 
        width="352px"
        height="288px"
    /> 
</div> 

如果过滤器已正确注册,则会自动加载RTSP源过滤器并构建适当的介质管道。这是我使用的方法,它适用于IE8,chrome和firefox。我还没有用IE6测试过它。谁仍然使用该浏览器:P

这种方法的缺点是它有相当多的工作(和复杂),或者至少你需要一些扎实的DirectShow体验来实现过滤器并满足不同的媒体类型。

答案 2 :(得分:2)