By

字数 1.5k 字 阅读时长 ≈ 8 分钟

文章目录

一直没接触过流媒体，这次项目当中需要涉及到接收来自服务器的流媒体监控视频，并实时播放、切换、关闭，于是查找了一下资料。发现原以为是难点的地方，全部都很简单。

首先，要嵌入流媒体很简单，主要有以下2种方式：

1.** 标签型（严重推荐）**:

1
2
<embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="[流媒体地址]">
</embed>

当然，还有简化版的：

1
<embed src="[流媒体地址]" style="height: 140px; width: 240px" type=audio/mpeg AUTOSTART="1" loop="0">

2. 综合型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 codebase="http://activex.microsoft.com/activex/controls/mplayer
/en/nsmp2inf.cab#Version=6,1,5,217"
id=MediaPlayer type=application/x-oleobject width=210 height=340 standby="Loading Microsoft Windows Media Player components..." VIEWASTEXT align=MIDDLE>
<param name=AudioStream value=-1>
<param name=AutoSize value=0>
<param name=AutoStart value=1>
<param name=AnimationAtStart value=0>
<param name=AllowScan value=-1>
<param name=AllowChangeDisplaySize value=0>
<param name=AutoRewind value=0>
<param name=Balance value=0>
<param name=BaseURL value="">
<param name=BufferingTime value=5>
<param name=CaptioningID value="">
<param name=ClickToPlay value=0>
<param name=CursorType value=32512>
<param name=CurrentPosition value=-1>
<param name=CurrentMarker value=0>
<param name=DefaultFrame value=1>
<param name=DisplayBackColor value=0>
<param name=DisplayForeColor value=16777215>
<param name=DisplayMode value=0>
<param name=DisplaySize value=0>
<param name=Enabled value=-1>
<param name=EnableContextMenu value=-1>
<param name=EnablePositionControls value=0>
<param name=EnableFullScreenControls value=0>
<param name=EnableTracker value=1>
<param name=Filename value="[流媒体地址]">
<param name=InvokeURLs value=-1>
<param name=Language value=-1>
<param name=Mute value=0>
<param name=PlayCount value=1>
<param name=PreviewMode value=0>
<param name=Rate value=1>
<param name=SAMILang value="">
<param name=SAMIStyle value="">
<param name=SAMIFileName value="">
<param name=SelectionStart value=0>
<param name=SelectionEnd value=true>
<param name=SendOpenStateChangeEvents value=-1>
<param name=SendWarningEvents value=-1>
<param name=SendErrorEvents value=-1>
<param name=SendKeyboardEvents value=0>
<param name=SendMouseClickEvents value=0>
<param name=SendMouseMoveEvents value=0>
<param name=SendPlayStateChangeEvents value=-1>
<param name=ShowCaptioning value=0>
<param name=ShowControls value=1>
<param name=ShowAudioControls value=1>
<param name=ShowDisplay value=1>
<param name=ShowGotoBar value=1>
<param name=ShowPositionControls value=1>
<param name=ShowStatusBar value=1>
<param name=ShowTracker value=1>
<param name=TransparentAtStart value=0>
<param name=VideoBorderWidth value=0>
<param name=VideoBorderColor value=0>
<param name=VideoBorder3D value=0>
<param name=Volume value=-1070>
<param name=WindowlessVideo value=1>
</object>

其次，非常重要的一个环节，就是停止播放和切换流媒体地址。也相当简单粗暴。

尝试过直接用js操作替换src内容，发现并不会发生变化。于是采用了移除原有的embed标签，新建一个包含新地址的embed在原来的div中，完美解决。

唯一不放心的是，不知道被移除标签中嵌入的流媒体在后台会不会继续。反正有人告诉我不会……

最后，是切换一页显示多少个视频，也就是布局问题。这个乍看好像有点麻烦，其实也再简单不过了。

先定义好最多有几个，并且给每个流媒体的div标签id赋值。然后按切换需要，隐藏div，并重新给div赋值进行布局（不要删除div，否则还原回多个摄像头画面时，原有的视频会消失，同时会影响布局时的操控，更复杂）。

没图说个XX，好吧，上代码……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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" />
<title>流媒体切换</title>
<script src="jquery-1.7.2.min.js"></script>
<style>
button{width:200px;height:50px;margin-top:30px;}
</style>
<script>
    $(document).ready(function(){
        var embedStart = "<embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src='";
        var embedEnd = "'></embed>";
        var mms1 = "rtsp://live.hugd.com/whyl.wmv"; //湖州文化娱乐
        var mms2 = "rtsp://live.hugd.com/xwzh.wmv"; //湖州新闻综合

        $('#btn1').click(function() {
            $("#mms3 embed").remove();
            $("#mms3").append(embedStart+mms1+embedEnd);
        });
        $('#btn2').click(function() {
            $("#mms1 embed").remove();
            $("#mms1").append(embedStart+mms2+embedEnd);
        });
    })
</script>
</head>

<body>
    <div id="mms1">
        <embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="rtsp://live.hugd.com/whyl.wmv">
        </embed>
    </div>
    <div id="mms2">
        <embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="rtsp://live.hugd.com/xwzh.wmv">
        </embed>
    </div>
    <div id="mms3">
        <embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="mms://211.106.66.141/moretv/drama/2tv/dra_misa/bgm/01.asf">
        </embed>
    </div>
    <div id="mms4">
        <embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="mms://211.106.66.141/moretv/drama/2tv/dra_misa/bgm/01.asf">
        </embed>
    </div>
    <div id="mms5">
        <embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="mms://211.106.66.141/moretv/drama/2tv/dra_misa/bgm/01.asf">
        </embed>
    </div>

    <button id="btn1">点我填充第3个</button>
    <button id="btn2">点我替换第1个</button>
</body>
</html>

♦ 本文固定连接：https://www.gsgundam.com/archive/2013-10-20-web-media-stream-camera/

♦ 转载请注明：GSGundam 2013年10月20日发布于 GSGUNDAM砍柴工

♦ 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

♦ 原创不易，如果页面上有适合你的广告，不妨点击一下看看，支持作者。（广告来源：Google Adsense）

♦ 本文总阅读量次

技术知识
javascriptjsjQuery网页htmlembedmmsrtps摄像头流媒体监控

推荐文章