Javascript 在具有良好浏览器兼容性的网页上播放 Rtsp 流的最有效插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6211330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Most effective plugin to play Rtsp streams on a webpage with good browser compatibilty
提问by elricL
Here is a overview of my code. User press a record button and it hits the server to start a surveillance stream,and it returns a rtsp url which I want to play on the website.
这是我的代码的概述。用户按下一个录制按钮，它点击服务器启动一个监视流，它返回一个我想在网站上播放的 rtsp url。
I have tried vlc plugin, but it seems to be unreliable the following code creates the after-mentioned problems.
我试过 vlc 插件，但似乎不可靠，下面的代码造成了后面提到的问题。
Any other ideas to implement this functionality is more than welcome.
任何其他实现此功能的想法都非常受欢迎。
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");
}
}
};
These are the following problems I have.
这些是我遇到的以下问题。
- Not working in IE6.
- The stream playing is unreliable. It sometime plays and sometimes doesnt. The only proper way of fixing this seems to be adding a alert box just after the res_array length if check
- Even if try to play a audio source,a black box for playing a video appears.
- 不适用于 IE6。
- 流播放不可靠。它有时会播放，有时不会。解决这个问题的唯一正确方法似乎是在 res_array 长度之后添加一个警告框，如果检查
- 即使尝试播放音频源，也会出现播放视频的黑框。
P.S. Would this get any easier if I try using HTML5 and I know about frameworks such as jquery, but it is not possible for me to use it in this project.
PS 如果我尝试使用 HTML5 并且我知道诸如 jquery 之类的框架，这会变得更容易，但是我不可能在这个项目中使用它。
采纳答案by Ralf
Since you don't mention OS: Another windows-only option is to write your own RTSP DirectShow source filter. Such a filter can then be registered for the RTSP protocol. On the webpage you can insert it via:
由于您没有提到操作系统：另一个仅限 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>
If the filter is registered correctly, the RTSP source filter is automatically loaded and an appropriate media pipeline is constructed. This is the approach I've used and it works on IE8, chrome and firefox. I have not tested it with IE6. Who still uses that browser anyway :P
如果过滤器注册正确，RTSP 源过滤器会自动加载并构建适当的媒体管道。这是我使用过的方法，它适用于 IE8、chrome 和 firefox。我还没有用 IE6 测试过。谁仍然使用该浏览器：P
The downside of this approach is that it's quite a bit of work (and complex), or at least you need some solid DirectShow experience to implement the filter and cater for different media types.
这种方法的缺点是工作量很大（而且很复杂），或者至少您需要一些扎实的 DirectShow 经验来实现过滤器并迎合不同的媒体类型。
回答by Drazisil
If I'm reading this correctly, it sounds like it's always displaying the stream, but not always auto-playing, correct? I would guess it's a timing issue where the object is trying to autoplay before the object it fully written to the page. If that's the case, would setting autoplay=false and then calling a controlname.play after creating the object fix the issue?
如果我没看错，听起来它总是显示流，但并不总是自动播放，对吗？我猜这是一个时间问题，对象试图在对象完全写入页面之前自动播放。如果是这种情况，设置 autoplay=false 然后在创建对象后调用 controlname.play 会解决问题吗？
回答by expelledboy
Maybe this will help? http://quicktime.tc.columbia.edu/users/iml/movies/mtest.html
也许这会有所帮助？http://quicktime.tc.columbia.edu/users/iml/movies/mtest.html
