网页在线视频播放代码大全
使用说明:把代码中的视频路径换成与自己的相对路径或绝对路径,播放器的窗口大小,根据需要修改高和宽的参数。
1.avi格式
<object id="video" width="400" height="200" border="0" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa">
<param name="showdisplay" value="0">
<param name="showcontrols" value="1">
<param name="autostart" value="1">
<param name="autorewind" value="0">
<param name="playcount" value="0">
<param name="appearance value="0 value=""">
<param name="borderstyle value="0 value=""">
<param name="moviewindowheight" value="240">
<param name="moviewindowwidth" value="320">
<param name="filename" value="https://www.jb51.net/sample.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="https://www.jb51.net/sample.avi" src="sample.avi">
</embed>
</object>
2.mpg格式
<object classid="clsid:05589fa1-c356-11ce-bf01-00aa0055595a" id="activemovie1" width="239" height="250">
<param name="appearance" value="0">
<param name="autostart" value="-1">
<param name="allowchangedisplaymode" value="-1">
<param name="allowhidedisplay" value="0">
<param name="allowhidecontrols" value="-1">
<param name="autorewind" value="-1">
<param name="balance" value="0">
<param name="currentposition" value="0">
<param name="displaybackcolor" value="0">
<param name="displayforecolor" value="16777215">
<param name="displaymode" value="0">
<param name="enabled" value="-1">
<param name="enablecontextmenu" value="-1">
<param name="enablepositioncontrols" value="-1">
<param name="enableselectioncontrols" value="0">
<param name="enabletracker" value="-1">
<param name="filename" value="https://www.jb51.net/sample.mpg" valuetype="ref">
<param name="fullscreenmode" value="0">
<param name="moviewindowsize" value="0">
<param name="playcount" value="1">
<param name="rate" value="1">
<param name="selectionstart" value="-1">
<param name="selectionend" value="-1">
<param name="showcontrols" value="-1">
<param name="showdisplay" value="-1">
<param name="showpositioncontrols" value="0">
<param name="showtracker" value="-1">
<param name="volume" value="-480">
</object>
3.rm格式
<object id=video1 classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" height=288 width=352> <param name="_extentx" value="9313">
<param name="_extenty" value="7620">
<param name="autostart" value="0">
<param name="shuffle" value="0">
<param name="prefetch" value="0">
<param name="nolabels" value="0">
<param name="src" value="rtsp://203.207.131.35/vod/dawan-a.rm";>
<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"><embed src type="audio/x-pn-realaudio-plugin" console="clip1" controls="imagewindow" height="288" width="352" autostart="false"> </object>
4.wmv格式
<object id="nsplay" width=200 height=180 classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=6,4,5,715" standby="loading microsoft windows media player components..." type="application/x-oleobject" align="right" hspace="5">
<!-- asx file name -->
<param name="autorewind" value=1>
<param name="filename" value="xxxxxx.wmv">
<!-- display controls -->
<param name="showcontrols" value="1">
<!-- display position controls -->
<param name="showpositioncontrols" value="0">
<!-- display audio controls -->
<param name="showaudiocontrols" value="1">
<!-- display tracker controls -->
<param name="showtracker" value="0">
<!-- show display -->
<param name="showdisplay" value="0">
<!-- display status bar -->
<param name="showstatusbar" value="0">
<!-- diplay go to bar -->
<param name="showgotobar" value="0">
<!-- display controls -->
<param name="showcaptioning" value="0">
<!-- player autostart -->
<param name="autostart" value=1>
<!-- animation at start -->
<param name="volume" value="-2500">
<param name="animationatstart" value="0">
<!-- transparent at start -->
<param name="transparentatstart" value="0">
<!-- do not allow a change in display size -->
<param name="allowchangedisplaysize" value="0">
<!-- do not allow scanning -->
<param name="allowscan" value="0">
<!-- do not show contect menu on right mouse click -->
<param name="enablecontextmenu" value="0">
<!-- do not allow playback toggling on mouse click -->
<param name="clicktoplay" value="0">
</object>
5:最简单的播放代码
<embed src="https://www.jb51.net/sample.wmv" autostart="true" loop="true" width="200" height="150" >
6:有图像的rm格式
<object classid=clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa height=288 id=video1 width=305 viewastext>
<param name=_extentx value=5503>
<param name=_extenty value=1588>
<param name=autostart value=-1>
<param name=shuffle value=0>
<param name=prefetch value=0>
<param name=nolabels value=0>
<param name=src value=https://www.jb51.net/sample.ram>
<param name=controls value=imagewindow,statusbar,controlpanel>
<param name=console value=raplayer>
<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>
7:无图像的rm格式:(如相声,歌曲...)
<object id=video2 width=300 height=62 classid=clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa>
<param name=_extentx value=9657>
<param name=_extenty value=847>
<param name=autostart value=-1>
<param name=shuffle value=0>
<param name=prefetch value=0>
<param name=nolabels value=0>
<param name=src value=https://www.jb51.net/sample.rm>
<param name=controls value=statusbar,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>
8:最简单的media格式的播放器
<embed src=mms://www.jb51.net/sample.wmv width=200 height=200 autostart=true loop=true></embed>
9:有图像的media播放器,自动调用网上的插件
<object id=nstv classid=clsid:6bf52a52-394a-11d3-b153-00c04f79faa6 width=280 height=265 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701standby=loading microsoft? windows media? player components... type=application/x-oleobject>
<param name=url value=https://www.jb51.net/sample.wma>
<param name=uimode value=full><param name=autostart value=true>
<param name=enabled value=true>
<param name=enablecontextmenu value=false>
<param name=windowlessvideo value=true></object>
10:无图像的media播放器
<object id=nstv classid=clsid:6bf52a52-394a-11d3-b153-00c04f79faa6 width=280 height=60 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701standby=loading microsoft? windows media? player components... type=application/x-oleobject>
<param name=url value=https://www.jb51.net/sample.wma>
<param name=uimode value=full><param name=autostart value=true>
<param name=enabled value=true>
<param name=enablecontextmenu value=false>
</object>
11:在线播放rm格式视频代码
<object id="player" name="player" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" width="400" height="272">
<param name="_extentx" value="18415">
<param name="_extenty" value="9102">
<param name="autostart" value="-1">
<param name="shuffle" value="0">
<param name="prefetch" value="0">
<param name="nolabels" value="-1">
<param name="src" value="https://www.jb51.net/sample.rm">
<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><br>
<object id="rp2" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" width="400" height="57">
<param name="_extentx" value="18415">
<param name="_extenty" value="1005">
<param name="autostart" value="-1">
<param name="shuffle" value="0">
<param name="prefetch" value="0">
<param name="nolabels" value="-1">
<param name="src" value="https://www.jb51.net/sample.rm">
<param name="controls" value="controlpanel,statusbar">
<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>
媒体播放器的外观界面
在网页中,你可以通过相关属性来控制媒体播放器的哪些部分出现,哪些部分不出现。
媒体播放器包括如下元素:
videodisplaypanel:视频显示面板;
videoborder:视频边框;
closedcaptioningdisplaypanel;字幕显示面板;
trackbar;搜索栏;
controlbarwithaudioandpositioncontrols:带有声音和位置控制的控制栏;
gotobar:转到栏;
displaypanel:显示面板;
statusbar:状态栏;
下面的属性用来决定显示哪一个元素:
showcontrols属性:是否显示控制栏(包括播放控件及可选的声音和位置控件);
showaudiocontrols属性:是否在控制栏显示声音控件(静音按钮和音量滑块);
showpositioncontrols属性:是否在控制栏显示位置控件(包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑);
showtracker属性:是否显示搜索栏;
showdisplay属性:是否显示显示面板(用来提供节目与剪辑的信息);
showcaptioning属性:是否显示字幕显示面板;
showgotobar属性:是否显示转到栏;
showstatusbar属性:是否显示状态栏;
播放列表
媒体播放器提供下面的方法来访问播放列表中的剪辑:
next方法,跳到节目(播放列表)中的下一个剪辑;
previous方法,跳回到节目中的上一个剪辑;
媒体播放器的一个特性是能够预览节目中的每一个剪辑,使用如下属性:
previewmode属性,决定媒体播放器当前是否处于预览模式;
canpreview属性,决定媒体播放器能否处于预览模式;
在windows媒体元文件中,可以为每一个剪辑指定预览时间——previewduration,如果没有指定,那么默认的预览时间是10秒钟。
你也可以用windows媒体元文件来添加watermarks与banners,元文件也支持插入广告时的无间隙流切换。
节目信息
使用getmediainfostring方法可以返回相关剪辑或节目的如下信息:
文件名:filename
标题:title
描述:description
作者:author
版权:copyright
级别:rating
urls:logoicon、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:提供与该类型错误相关的代码值;
errordescription:提供错误的描述信息;
errorcorrection:指定媒体播放器对该类型的错误进行校正;
播放cd
媒体播放器将cd看作(在每个音轨的开头具有标记的)单一音频流。要在网页中使用cd,你需要将filename属性设为cdaudi,必须带有冒号,如下所示:
<html>
<head><title>cdaudioplaybackexample</title></head>
<body>
<objectid="mediaplayer"
classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
width="320"
height="508"
style="position:absolute;left:0px;top:70px;">
<paramname="filename"value="cdaudi">
<paramname="autostart"value="0">
<paramname="showcontrols"value="1">
<paramname="showstatusbar"value="1">
<paramname="showdisplay"value="1">
</object>
</body>
</html>
之后你可以用play方法播放cd了。
你可以在windows媒体元文件中指定播放顺序以及每个音轨的信息。示例如下:
<asxversion="3.0">
<title>cdaudiowiththemediaplayer</title>
<author>windowsmediatechnologies</author>
<copyright>(c)1999,microsoft,inc.</copyright>
<entry>
<title>track1:title1</title>
<refhref="/blog/cdaudi"/>
<startmarkernumber="1"/>
<endmarkernumber="2"/>
</entry>
<entry>
<title>track2:title2</title>
<refhref="/blog/cdaudi"/>
<startmarkernumber="2"/>
<endmarkernumber="3"/>
</entry>
<entry>
<title>track3:title3</title>
<refhref="/blog/cdaudi"/>
<startmarkernumber="3"/>
<endmarkernumber="4"/>
</entry>
<entry>
<title>track4:title4</title>
<refhref="/blog/cdaudi"/>
<startmarkernumber="4"/>
</entry>
</asx>