文章目录

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

首先,要嵌入流媒体很简单,主要有以下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
2
<embed src="[流媒体地址]" style="height: 140px; width: 240px" type=audio/mpeg AUTOSTART="1" loop="0">
  1. 综合型:
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
63
<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
55
<!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>

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

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

友荐云推荐