html中播放rtsp协议的流地址（不通过协议转换完成）

最新推荐文章于 2024-10-10 14:28:22 发布

红磡

最新推荐文章于 2024-10-10 14:28:22 发布

阅读量1.3k

点赞数

文章标签： html chrome 前端 rtsp

本文链接：https://blog.csdn.net/weixin_42449442/article/details/121670340

版权

背景：想在浏览器中播放rtsp协议的流媒体视频

开门见山

工具的选择：我们使用 IE+VLC来播放视频流，之所以用IE，原因是发现chrome45版本之后不再支持ActiveX

（目前只有IE支持activex，所以只能用IE浏览器，我用的是IE11)

准备阶段

1.IE ：11版本

2.VLC一定要用vlc-1.0.5版本附一个下载地址 http://downloads.videolan.org/pub/videolan/vlc/

安装时一定要勾选Mozilla 和ActiveX 插件

3.设置IE的安全级别

4.并在浏览器中检查是否加载此项设置-管理加载项-当前已加载的加载项

5.保存demo 关键地方来了在object标签中的 classid 后面的9BE31822-FDAD-461B-AD51-BE1D1C159921 一定要和浏览器中的activex插件的 id相同，pluginspage 属性为固定写法

右键步骤4 中的的VLC ActiveX ,点详细信息可以看到

其中代码中的这段：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" />

告诉浏览器去模拟IE11

查看自己浏览器版本 F12 控制台上输入navigator.userAgent

我的版本是： IE10。就配置成

<!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="X-UA-Compatible" content="IE=EmulateIE11" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
</script>
</head>

<body>
<input type="text" name="url" value="" size="600"/>
   <input type="button" name="播放" value="播放" οnclick="play()"/>
   <input type="button" name="停止" value="停止" οnclick="stop()"/>
<div>
<object type='application/x-vlc-plugin' classid= "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" id='vlc' width="720" height="540" pluginspage="http://www.videolan.org/" >
<param name='mrl' value='' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />

</object>
</div>
</body>
<script type="text/javascript" >
function play()
{
   var vlc = document.getElementById("vlc");
   var rtspUrl=document.getElementById("url").value;
   var options = new Array(":aspect-ratio=4:3", "--rtsp-tcp");
   var vlc=document.getElementById("vlc");
var itemId= vlc.playlist.add(rtspUrl);
vlc.playlist.playItem(itemId);

//var id = vlc.playlist.add(rtspUrl, "fancy name", options);
   //vlc.playlist.playItem(id);
   //vlc.playlist.play();
}
function checkBrowser(){
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ( browser=="Netscape" && version>=4) {
if(isInsalledFFVLC()){
alert("已装VLC插件");
}else{
alert("未装VLC插件");
}
}else if(browser=="Microsoft Internet Explorer" && version>=4) {
if(isInsalledIEVLC()){
alert("已装VLC插件");
}else{
alert("未装VLC插件");
}
}
}
           function isInsalledIEVLC(){
var vlcObj = null;
var vlcInstalled= false;
try {
vlcObj = new ActiveXObject("VideoLAN.VlCPlugin.2");
if( vlcObj != null ){
vlcInstalled = true
}
} catch (e) {
vlcInstalled= false;
}
return vlcInstalled;
}
function stop()
{
   var vlc = document.getElementById("vlc");
   vlc.playlist.stop();
}
</script>

</html>