网页中的多媒体播放控制
时间:2007-03-30 来源:sasc
网页中的多媒体播放控制
1.声音及影像播放的控制之一
1. rm文件在线播放
<embed height=25 srcwww.xiakedao.com/biyun/ren/a.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" controls="PlayButton">
autostart="false" 打开页面时处于候命状态,autostart="true" 打开页面时马上听声音 height=25 width=50 有不同数值,播放器面板有些不同
2.midi、au、avi文件在线播放
<EMBED SRC="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/1.mid"; width="47" height="24" AUTOSTART=TRUE>autostart="false" 打开页面时处于候命状态,autostart="true" 打开页面时马上听声音 height=25 width=50 有不同数值,播放器面板有些不同
3. asf文件在线播放(这是我最喜欢并且正在用的)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body topmargin="0" leftmargin="0">
<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=7.0 height=53 id=NSPlay0 name=NSPlay type=application/x-oleobject width=87 VIEWASTEXT standby="Loading Microsoft Windows Media Player components..." border="0"><param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AutoStart" value="0">
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="10">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="65280">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<param name="Filename" value="http://www.shunde.net.cn/~biyun/wlsd/down/yin/zheng/asf/5.asf";>
<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="-1">
<param name="SelectionEnd" value="-1">
<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="0">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="-1">
<param name="ShowStatusBar" value="-1">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="-1">
<param name="Volume" value="0">
<param name="WindowlessVideo" value="0">
</object>
其中<param name="AutoStart" value="0"> 0为打开页面处于待命状态,为1时打开页面直接播放 </body>
</html>
4.mp3的在线播放
4.mp3的在线播放
我也不知道。我只知道mp3可以流式收听,哪位知道mp3的在线收听页面代码,请告诉我。
流式收听mp3方法:
http://*.mp3,http://*.mp3,http://*.mp3,http://*.mp3,
把上面的的文件另存为*.m3u,就可实现在线播放*.mp3(支持连续播放)
5.mpeg影象在线播放:
等等,让它下载<img border="0" dynsrc="http://music.cnvnet.com/video/0321.mpeg ;
" start="fileopen">
6.rm影像在线播放
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=114 height=100>
<param name="_ExtentX" value="3016">
<param name="_ExtentY" value="2646">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/002.ram";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
其中RAM文件其实是把自己的RM文件绝对地址写在记事本上,另存为**.ram就可以了。这里的例子上的RAM文件原代码是http://music.cnvnet.com/mtv/20010618/002.rm ;
大一些,加几个控制器
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=300>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="7938">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/001.ram";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object> <object id="vid2" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=30>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="794">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/001.ram";>
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
2.声音及影像播放的控制之二
MP3
以下内容为程序代码:
<embed src="mm.mp3" width="147" height="44" AUTOSTART=TRUE></embed>
meidy play能支持的都能放的
鼠标到,声音出,2个示例(以前贴过的)
以下内容为程序代码:
<bgsound id=bgsoundone src="" loop=-1>
<A href="#" name=btn1>HERE1</a><br><br>
<A href="#" name=btn2>HERE2</a><EMBED src="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/S/21.mid"; autostart="false" width="0" height="0" ><EMBED src="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/S/11.mid"; autostart="false" width="0" height="0" >
点击什么音源,都在页面固定的“播放器”播放(以rm文件为例)
1.做一个小框架页 代码片段如下:
以下内容为程序代码:
<IFRAME src="http://www.xiakedao.com/biyun/3/0/diangemain.htm"; marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="50" height="25" name="diange"></IFRAME>
2.这个内嵌框架页 width="72" height="17" ,框架无滚动条,刚好只显示REALPLAY播放器,不会露馅。注意设该框架页的名字。比如这里是diange
3.把以下这段代码放在你设定的框架页里,我这里是http://www.xiakedao.com/biyun/3/0/diangemain.htm页面,最好先把页边距设为0。
<embed height=25 src=http://www.xiakedao.com/biyun/ren/1.rm type=audio/x-pn-realaudio-plugin width=50 autostart="true" controls="PlayButton">
4.这是一个实例
<IFRAME src="http://www.xiakedao.com/biyun/3/0/diangemain.htm"; marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="50" height="25" name="diange"></IFRAME>
其中http://www.xiakedao.com/biyun/3/0/diangemain.htm的原文件是
<body topmargin="0" leftmargin="0">
<embed height=25 src=http://www.xiakedao.com/biyun/ren/1.rm type=audio/x-pn-realaudio-plugin width=50 autostart="true" controls="PlayButton">
</body>
现在做一个框架页是为了让你点击连接后使RM文件在这个固定的播放器里播出而已。为每一个RM做一个类似diangemain.htm这样的页面,修改其中的声音地址就可以了。注意主页面里的连接要写明 target="diange"(你可以自己设定名字的,不过要与框架页的name="diange"相对应)
控制媒体播放器音量(转贴 )
以下内容为程序代码:
<embed id=mm width=100 height=100 src=http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/1.mid></embed><br>
<br>
<button onclick=mm.ShowDialog(2)>Option</button>
<HTML>
<HEAD>
<TITLE></TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
</HEAD>
<BODY bgColor=#FFFFFF onload="currentBGM()">
<center>
<form mathod="post" name="bgmparent">
<select name="bgmselect" onChange="bgmselecter(this)">
<option value="">--SELECT BGM--
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/1.mid";>BGM1
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/2.mid";>BGM2
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/3.mid";>BGM3
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/4.mid";>BGM4
</select>
</form>
</center>
</BODY>
</HTML>
下拉菜单控制音乐出(无播放器)
以下内容为程序代码:
<HTML>
<HEAD>
<TITLE></TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
</HEAD>
<BODY bgColor=#FFFFFF onload="currentBGM()">
<center>
<form mathod="post" name="bgmparent">
<select name="bgmselect" onChange="bgmselecter(this)">
<option value="">--SELECT BGM--
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/1.mid";>BGM1
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/2.mid";>BGM2
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/3.mid";>BGM3
<option value="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/4.mid";>BGM4
</select>
</form>
</center>
</BODY>
</HTML>
31天不同 的音乐(转贴)
以下内容为程序代码:
midi音乐随机出(有播放器)
以下内容为程序代码:
当WIDTH=48 HEIGHT=26 都为0时,可以隐藏播放器<INPUT onclick=history.go(0) type=button value=刷新看效果>
浏览本机音源播出(以前这里的旧贴)
以下内容为程序代码:
<form name="frmMedia">
<p align="center"><input type="file" name="fnMedia" size="20"><br>
<input type="button" value="播 放" name="B1" onclick="playMedia(this.form);"><input type="reset" value="重 置" name="B2"></p>
</form>
3.网页视频控制之使用指南
□播放方法和属性
除播放、暂停、停止外,媒体播放器还可用下面的属性:
扫描(Scanning)——与录像机的快进快倒功能类似;
搜索(Seeking)——直接移到剪辑中标记的特定上演时间;
□播放
媒体播放器提供了两种技术来指定要播放的媒体名称(剪辑),你可以设置 FileName 属
性,或调用 Open 方法。 如果 AutoStart 属性的值是 true 的话,当 FileName 属性被设
置成该电影剪辑的 URL 后,该电影剪辑将开始播放;否则电影剪辑不会开始播放, 除非你
调用 Play 方法。 Open 方法开始播放是异步的,它不象 Play 方法要等到其他的进程结束
后才开始播放。
媒体播放器提供了下面的类似录像机的属性和方法来控制流媒体的播放:
Play、Stop、Pause 方法,来开始、停止、暂停流媒体。
PlayCount 属性,设置文件播放的次数。
AutoRewind 属性,确定当停止播放时是否返回到电影剪辑的开始部分。
□音频控制
媒体播放器提供了下面的属性来管理音频:
Balance 属性,确定左右音箱的声音平衡;
Volume 属性,用来加大或降低音量;
Mute 属性,用来关闭或打开声音;
※你可以将 ShowAudioControls 属性设为 true 来在控制栏添加处理声音的控件。
□扫描
媒体播放器提供了下面的属性用以扫描:
FastForward 方法,快进;
FastReverse 方法,快倒;
Rate属性,改变播放速率;
※要想使电影剪辑能被扫描,必须将 CanScan 和 AllowScan 属性设为 true。
□搜索
用于搜索的属性有:
MarkerCount 属性,指剪辑中标记的总数量;
CurrentMaker、GetMarkerName、GetMarkerTime 方法,用于返回标记信息;
MarkerHit 事件,当遇到标记时触发;
CurrentPosition 属性,当前位置(用秒度量),可用来将播放头移到剪辑中指定的点;
PositionChange 事件,当设置 CurrentPosition 属性时触发;
※要想搜索到任意的时间,必须将 CanSeek 属性设为 true,要想搜索到标记点,必须
将 CanSeekToMarkers 属性设为 true。
□媒体播放器的外观界面
在网页中,你可以通过相关属性来控制媒体播放器的哪些部分出现,哪些部分不出现。
媒体播放器包括如下元素:
Video Display Panel:视频显示面板;
Video Border:视频边框;
Closed Captioning Display Panel;字幕显示面板;
Track Bar;搜索栏;
Control Bar with Audio and Position Controls:带有声音和位置控制的控制栏;
Go To Bar:转到栏;
Display Panel:显示面板;
Status Bar:状态栏;
下面的属性用来决定显示哪一个元素:
ShowControls 属性:是否显示控制栏(包括播放控件及可选的声音和位置控件);
ShowAudioControls 属性:是否在控制栏显示声音控件(静音按钮和音量滑块);
ShowPositionControls 属性:是否在控制栏显示位置控件(包括向后跳进、快退、
快进、向前跳进、预览播放列表中的每个剪辑);
ShowTracker 属性:是否显示搜索栏;
ShowDisplay 属性:是否显示显示面板(用来提供节目与剪辑的信息);
ShowCaptioning 属性:是否显示字幕显示面板;
ShowGotoBar 属性:是否显示转到栏;
ShowStatusBar 属性:是否显示状态栏;
□播放列表
媒体播放器提供下面的方法来访问播放列表中的剪辑:
Next 方法,跳到节目(播放列表)中的下一个剪辑;
Previous 方法,跳回到节目中的上一个剪辑;
媒体播放器的一个特性是能够预览节目中的每一个剪辑,使用如下属性:
PreviewMode 属性,决定媒体播放器当前是否处于预览模式;
CanPreview 属性,决定媒体播放器能否处于预览模式;
在windows 媒体元文件中,可以为每一个剪辑指定预览时间——PREVIEWDURATION,如果
没有指定,那么默认的预览时间是10秒钟。
你也可以用Windows 媒体元文件来添加 watermarks 与 banners,元文件也支持插入广
告时的无间隙流切换。
□节目信息
使用 GetMediaInfoString 方法可以返回相关剪辑或节目的如下信息:
文件名:File name
标题:Title
描述:Description
作者:Author
版权:Copyright
级别:Rating
URLs:logo icon、watermark、banner的地址
剪辑信息可以放在媒体文件中,也可以放在Windows 媒体元文件中,或者两者都放。如
果在元文件中指定了剪辑信息,那么用 GetMediaInfoString 方法返回的就是元文件中的信
息,而不会返回剪辑中包含的信息。
在元文件中,附加信息可以放置在每一个剪辑或节目的 PARAM标签中。你可以为每个剪
辑添加任意多个 PARAM 标签,用来存储自定义的信息或链接到相关站点。在 PARAM 标签中
的信息可以通过 GetMediaParameter 方法来访问。
下面的属性返回有关大小和时间的信息:
ImageSourceHeight、ImageSourceWidth:返回图像窗口的显示尺寸;
Duration 属性,返回剪辑的长度(秒), 要检测这个属性是否包含有效的数值,请检查
IsDurationValid 属性。(对于广播的视频,其长度是不可预知的)。
□字幕
你可以用 .smi 文件来为你的节目添加字幕。媒体播放器支持下面的属性来处理字幕:
SAMIFileName 属性,指定 .smi 文件的名字;
SAMILang 属性,指定字幕的语言(如果没有指定则使用第一种语言);
SAMIStyle 属性,指定字幕的文字大小和样式;
ShowCaptioning 属性,决定是否显示字幕显示面板;
□脚本命令
伴随音频、视频流,你可以在流媒体文件中加入脚本命令。脚本命令是多媒体流中与特
定时间同步的多对Unicode串。第一个串标识待发命令的类型,第二个串指定要执行的命令。
当流播放到与脚本相关的时间时,控件会向网页发送一个 ScriptCommand事件,然后由事件
处理进程来响应这个事件。脚本命令字符串会作为脚本命令事件的参数传递给事件处理器。
媒体播放器会自动处理下面类型的内嵌脚本命令:
1)URL型命令:当媒体播放器控件收到一个URL型的命令时,指定的URL会被装载到用户
的默认浏览器。如果媒体播放器嵌在一个分帧的HTML文件中,URL页可以装载到由脚本命令
指定的帧内。如果脚本命令没有指定一个帧,将由 DefaultFrame 属性决定将 URL 页装入
哪一帧。
你可以通过设置 InvokeURLs 属性来决定是否自动处理 URL 型的脚本命令。如果这个
属性的值为 false ,媒体播放器控件将忽视 URL型命令。但是脚本命令事件仍会触发,这
就允许你有选择地处理 URL 型命令。
URL 型命令指定的是 URL 的相对地址。基地址是由 BaseURL属性指定的。媒体播放器
控件传送的脚本命令事件的命令参数是链接好的地址。
2)FILENAME型命令:当媒体播放器控件收到一个FILENAME型的命令时,它将 FileName
属性设置为脚本命令提供的文件,之后媒体播放器会打开这个文件开始播放。 媒体播放器
控件总是自动处理 FILENAME 型命令,不象 URL 型命令,它们不能被禁止。
3)TEXT型命令:当媒体播放器控件收到一个 TEXT型的命令时,它会将命令的内容显示
在控件的字幕窗口。内容可以是纯文本的,也可以是 HTML。
4)EVENT型命令:当媒体播放器控件收到一个 EVENT型的命令时,它会在媒体元文件中
搜索 EVENT 元素的 NAME 属性。如果 NAME 属性与脚本命令中的第二个字符串匹配,媒体
播放器控件就执行包含在 EVENT 元素中的条目。
5)OPENEVENT型命令:当媒体播放器控件收到一个 OPENEVENT型的命令时,它会在媒体
元文件中检查 EVENT 元素,并打开匹配的标题,但不播放,直到收到来自 EVENT型命令的
同名真实事件。
□捕捉键盘和鼠标事件
EnableContextMenu 与 ClickToPlay 属性为用户提供了在图像窗口进行操作的方法。
如果 EnableContextMenu 属性为 true ,在图像窗口右击鼠标可以打开关联菜单,如果将
ClickToPlay 属性设为 true ,用户可以单击图像窗口进行播放与暂停的切换。
要接收鼠标移动和单击事件,请将 SendMouseMoveEvents 和 SendMouseClickEvents
属性设为 true 。鼠标事件有:
MouseDown,当用户按下鼠标时产生;
MouseUp,当用户释放鼠标时产生;
MouseMove,当用户移动鼠标时产生;
Click,当用户在媒体播放器上单击鼠标按钮时产生;
DbClick,当用户在媒体播放器上双击鼠标按钮时产生;
要接收键盘事件,请将 SendKeyboardEvents 属性设为 true 。键盘事件有:
KeyDown,当用户按下一个键时产生;
KeyUp,当用户释放一个键时产生;
KeyPress,当用户按下并释放一个键时产生;
□监测流状态与网络链接
流状态属性包括:
PlayState:播放状态;
OpenState:打开状态;
Bandwidth:带宽;
支持的事件有:
OpenStateChange:打开状态改变(仅当SendOpenStateChangeEvents属性为true时触发)
PlayStateChange:播放状态改变(仅当SendPlayStateChangeEvents属性为true时触发)
EndOfStream:流结束时触发;
NewStream:打开新流时触发;
网络接收属性包括:
ReceptionQuality:接收质量;
ReceivedPackets:已经收到的包;
LostPackets:丢失的包;
监测缓冲的属性有:
BufferingTime:缓冲时间;
BufferingCount:缓冲次数;
BufferingProgress:缓冲进程;
Buffering:缓冲事件;
□错误处理
媒体播放器提供了内建的错误处理功能——在对话框或状态栏显示错误信息。 另外,你
可以自己添加错误处理程序。如果 SendErrorEvents 属性设置为 true,将不会显示错误框,
而是发送错误事件;如果 SendErrorEvents 属性设置为 false,将显示错误框,而是发送错
误事件。
媒体播放器支持下面的错误处理事件:
Error 事件,指有危险性错误发生;
Warning 事件,指发生了非危险性的错误;
当你的应用程序接收到一个错误事件,你可以检测下面的属性来确定具体的错误信息:
HasError:检测目前的媒体播放器是否有错误;
ErrorCode:提供与该类型错误相关的