<!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>
</head>
<body>
<OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=400 WIDTH=600>
<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="iceage4.mp4">
<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="scale" value="tofit" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="ShowAudioControls" value="-1">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
<EMBED SRC="iceage4.mp4" type="video/quicktime"
PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="1000"
HEIGHT="600" scale="tofit" controller="true" autoplay="false"></EMBED>
</OBJECT>
</body>
</html>
Quicktime是一个跨浏览器的播放插件,可以实现RTSP视频直播,可用于电视直播或视频监控平台。本文主要讲了关于播放器如何实现直播、事件响应、播放器全屏、动态修改播放路径等问题。
需要准备的软件:quicktime安装文件、RTSP模拟器(或VLC播放器)。
以下是我的实现方式:
1. 播放器HTML静态代码
03 |
< object classid = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width = "640" height = "480" codebase = "http://www.apple.com/qtactivex/qtplugin.cab#version=7,6,9,0" standby = "控件加载中..." name = "QT_OBJ" id = "QT_OBJ" style = "behavior:url(#qt_event_source);overflow:hidden;" > |
04 |
< param name = "src" value = "ress/preview.mov" /> |
06 |
< param name = "enablejavascript" value = "true" /> |
07 |
< param name = "postdomevents" value = "true" /> |
08 |
< param name = "controller" value = "false" /> |
09 |
< param name = "scale" value = "tofit" /> |
10 |
< param name = "kioskmode" value = "true" /> |
11 |
< param name = "bgcolor" value = "#000000" /> |
12 |
< param name = "qtsrcdontusebrowser" value = "true" /> |
13 |
< param name = "cache" value = "false" /> |
15 |
< embed src = "ress/preview.mov" width = "640" height = "480" pluginspage = "http://www.apple.com/quicktime/download/" name = "QT_EMB" id = "QT_EMB" enablejavascript = "true" postdomevents = "true" controller = "false" scale = "tofit" kioskmode = "true" bgcolor = "#000000" qtsrcdontusebrowser = "true" cache = "false" style = "overflow:hidden;" ></ embed > |
代码说明:
1. object 用于IE浏览器,而 embed 用于非IE浏览器;
2. qt_event_source 对象是为了给IE浏览器注册事件,通过style( style="behavior:url(#qt_event_source);overflow:hidden;")绑定行为;
3. src="ress/preview.mov" 用于在页面加载后初始化控件,因为在上述代码中没有初始化 qtsrc 直播路径(便于动态切换播放路径);
4. kioskmode="true" 隐藏播放器右键菜单。
2. Javascript代码实现(部分)
021 |
setPlayerParameters : function (url) { |
024 |
var qt = Player.object; |
025 |
if (!$.browser.msie && !qt.SetURL) { |
029 |
qt.SetControllerVisible( false ); |
030 |
qt.SetKioskMode( true ); |
032 |
qt.SetBgColor( '#ffffff' ); |
035 |
alert( 'resetPlayerParameters - ' + e.toString()); |
044 |
setRate : function () { |
046 |
Player.object.SetRate(10); |
054 |
initGUrl : function (stream) { |
055 |
var host = location.hostname; |
057 |
var url = [ 'rtsp://' , host, port, '/' , stream ].join( '' ); |
063 |
regQuickTimeEvents : function () { |
064 |
var listerners = Player.listerners; |
065 |
if (document.addEventListener) { |
066 |
var obj = document.QT_EMB; |
069 |
obj.addEventListener( "qt_timechanged" , |
070 |
listerners._qt_timechanged_listerner); |
071 |
obj.addEventListener( "qt_stalled" , |
072 |
listerners._qt_stalled_listerner); |
074 |
.addEventListener( "qt_error" , |
075 |
listerners._qt_error_listerner); |
078 |
var obj = document.QT_OBJ; |
081 |
obj.attachEvent( "onqt_timechanged" , |
082 |
listerners._qt_timechanged_listerner); |
083 |
obj.attachEvent( "onqt_stalled" , |
084 |
listerners._qt_stalled_listerner); |
085 |
obj.attachEvent( "onqt_error" , listerners._qt_error_listerner); |
091 |
_qt_timechanged_listerner : function () { |
093 |
var qt = Player.object; |
094 |
if (!$.browser.msie && !qt.SetRate) { |
099 |
qt.SetBgColor( '#000000' ); |
100 |
Player.getStreamWidthHeight(qt, true ); |
104 |
_qt_stalled_listerner : function () { |
105 |
alert( '连接已终断,正在尝试重新连接...' ); |
107 |
_qt_error_listerner : function () { |
108 |
alert( '播放时发生错误,请刷新页面或重新登录来解决此问题!' ); |
116 |
adaptation : function () { |
120 |
var object = Player.object; |
122 |
var w_box = qt.width(); |
123 |
var h_box = qt.height(); |
124 |
var wh = Player.getStreamWidthHeight(object, false ); |
127 |
var w_per = wh.width || 640; |
128 |
var h_per = wh.height || 480; |
129 |
var rect = [ 0, 0, 640, 480 ]; |
130 |
var dw = w_per / w_box; |
131 |
var dh = h_per / h_box; |
133 |
rect[2] = parseInt(w_box); |
134 |
rect[3] = parseInt(h_box); |
135 |
} else if (dw > dh) { |
136 |
var h_per_new = h_per / dw; |
137 |
var offset = (h_box - h_per_new) / 2; |
138 |
rect[1] = parseInt(offset); |
139 |
rect[2] = parseInt(w_box); |
140 |
rect[3] = parseInt(h_per_new + offset); |
142 |
var w_per_new = w_per / dh; |
143 |
var offset = (w_box - w_per_new) / 2; |
144 |
rect[0] = parseInt(offset); |
145 |
rect[2] = parseInt(w_per_new + offset); |
146 |
rect[3] = parseInt(h_box); |
148 |
if (!$.browser.msie && !object.SetRectangle) { |
151 |
object.SetRectangle(rect.join( ',' )); |
164 |
getStreamWidthHeight : function (playerObj, isFlash) { |
168 |
if (!$.browser.msie && !playerObj.GetRectangle) { |
171 |
var rect = playerObj.GetRectangle().split( ',' ); |
172 |
var width = parseInt(rect[2]) - parseInt(rect[0]); |
173 |
var height = parseInt(rect[3]) - parseInt(rect[1]); |
175 |
this .stream.width = width; |
176 |
this .stream.height = height; |
179 |
width : width || this .stream.width, |
180 |
height : height || this .stream.height |
189 |
requestFullScreen : function (el) { |
194 |
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen |
195 |
|| el.mozRequestFullScreen || el.msRequestFullScreen; |
198 |
requestMethod.call(el); |
199 |
var stream = Player.stream; |
200 |
el.SetRectangle([ 0, 0, stream.width, stream.height ].join( ',' )); |
201 |
obj.width(window.screen.width); |
202 |
obj.height(window.screen.height); |
205 |
if (agent.name == 'safari' ) { |
代码说明:
1. 上述代码并不完整,需要根据实际情况作相应调整;
2. 基本使用方式:Player.regQuickTimeEvents().setPlayerParameters(url);
3. Quicktime在播放RTSP时会有3-5秒延迟,这是缓存所至,但控件没有提供相应清空缓存方法,只有通过SetRate()来设置播放速率来清除缓存。
可能出现的问题:
1. 在显示/隐藏播放控件、全屏/恢复时会导致重新加载视频;
3. 相关资源
1. JavaScript Scripting Guide for QuickTime
2. QuickTime: Embed Tag Attributes
3. QuickTime fullscreen ( 很帅的东西)
4. Quicktime插件函数列表
AddCuePoint(time, fcnName, pause) |
void |
|
Clear() |
void |
|
GetAutoPlay() |
Number |
|
GetBgColor() |
String |
获取播放器背景颜色 |
GetChapterCount() |
Number |
|
GetChapterName(chapterNum) |
String |
|
GetComponentVersion(type, subType, manufacturer) |
String |
|
GetControllerVisible() |
Number |
|
GetCurrentChapterIndex() |
Number |
|
GetDuration() |
Number |
|
GetEndTime() |
Number |
|
GetFieldOfView() |
Number |
|
GetHotspotTarget(hotspotID) |
String |
|
GetHotspotUrl(hotspotID) |
String |
|
GetHREF() |
Number |
|
GetIsLooping() |
Number |
|
GetIsQuickTimeRegistered() |
Number |
|
GetIsVRMovie() |
Number |
|
GetKioskMode() |
Number |
|
GetLanguage() |
String |
|
GetLoopIsPalindrome() |
Number |
|
GetMatrix() |
String |
|
GetMaxBytesLoaded() |
Number |
|
GetMaxTimeLoaded() |
Number |
|
GetMIMEType() |
String |
|
GetMovieID() |
Number |
|
GetMovieName() |
String |
|
GetMovieSize() |
Number |
|
GetMute() |
Number |
|
GetNodeCount() |
Number |
|
GetNodeID() |
Number |
|
GetPanAngle() |
Number |
|
GetPlayEveryFrame() |
Number |
|
GetPluginStatus() |
String |
|
GetPluginVersion() |
String |
|
GetQTNEXTUrl(index) |
String |
|
GetQuickTimeConnectionSpeed() |
Number |
|
GetQuickTimeLanguage() |
String |
|
GetQuickTimeVersion() |
String |
|
GetRate() |
Number |
|
GetRectangle() |
String |
|
GetResetPropertiesOnReload() |
Number |
|
GetSpriteTrackVariable(trackIndex, variableIndex) |
String |
|
GetStartTime() |
Number |
|
GetTarget() |
String |
|
GetTiltAngle() |
Number |
|
GetTime() |
Number |
|
GetTimeScale() |
Number |
|
GetTrackCount() |
Number |
|
GetTrackEnabled(index) |
Number |
|
GetTrackName(index) |
String |
|
GetTrackType(index) |
String |
|
GetURL() |
String |
|
GetUserData(type) |
String |
|
GetVolume() |
Number |
|
GoPreviousNode() |
void |
|
GoToChapter(chapterName) |
void |
|
Hide() |
void |
|
Play() |
void |
|
RemoveCuePoint(time, fcnName) |
void |
|
Rewind() |
void |
|
SendSpriteEvent(trackIndex, spriteID, messageID) |
void |
|
SetAutoPlay(autoPlay) |
void |
|
SetBgColor(color) |
void |
|
SetControllerVisible(visible) |
void |
|
SetCurrentChapterIndex(chapterIndex) |
void |
|
SetEndTime(time) |
void |
|
SetFieldOfView(fov) |
void |
|
SetHotspotTarget(hotspotID, target) |
void |
|
SetHotspotUrl(hotspotID, url) |
void |
|
SetHREF(url) |
void |
|
SetIsLooping(loop) |
void |
|
SetKioskMode(kioskMode) |
void |
|
SetLanguage(language) |
void |
|
SetLoopIsPalindrome(loop) |
void |
|
SetMatrix(matrix) |
void |
|
SetMovieID(movieID) |
void |
|
SetMovieName(movieName) |
void |
|
SetMute(mute) |
void |
|
SetNodeID(id) |
void |
|
SetPanAngle(angle) |
void |
|
SetPlayEveryFrame(playAll) |
void |
|
SetQTNEXTUrl(index, url) |
void |
|
SetRate(rate) |
void |
设置播放速度。可设置较大速度以此作清除缓存的辅助工具。 |
SetRectangle(rect) |
void |
设置显示画面大小和位置。 |
SetResetPropertiesOnReload(reset) |
void |
|
SetSpriteTrackVariable(trackIndex, variableIndex, value) |
void |
|
SetStartTime(time) |
void |
|
SetTarget(target) |
void |
|
SetTiltAngle(angle) |
void |
|
SetTime(time) |
void |
|
SetTrackEnabled(index, enabled) |
void |
|
SetURL(url) |
void |
|
SetVolume(volume) |
void |
|
Show() |
void |
|
ShowDefaultView() |
void |
|
Step(count) |
void |
|
Stop() |
void |
MediaPlayer代码测试,使用JS控制播放,复制下面代码,新建网页就可以进行测试。(后面在“其他播放器最后还有相关介绍”)
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="mp" width="300" height="240">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="-1">
<!--是否自动调整播放大小-->
<param name="AutoStart" value="-1">
<!--是否自动播放-->
<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">
<!--左右声道平衡,最左-9640,最右9640-->
<param name="BaseURL" value>
<param name="BufferingTime" value="15">
<!--缓冲时间-->
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="0">
<!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或
大于等于0-->
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理-->
<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.fth.com/UploadFile/070715035913.wma" valuetype="ref">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<!--是否静音-->
<param name="PlayCount" value="10">
<!--重复播放次数,0为始终重复-->
<param name="PreviewMode" value="-1">
<param name="Rate" value="1">
<!--播放速度1.0-2.0倍的速度播放-->
<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="-1">
<!--是否显示音量控制-->
<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">
<!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->
<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">
<!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640,最大0-->
<param name="WindowlessVideo" value="0">
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
</object>
<br>
<b>播放控制:</b><br>
音乐切换:
<input type="button" onclick="mp.Filename='http://www.fzl43.com/upload/2007_09/07090821519958.wma'" value="生命要继续">
<input type="button" onclick="mp.Filename='http://www.fth.com/UploadFile/070715035913.wma'" value="我们的歌">
<input type="button" onclick="alert(mp.Filename)" value="当前曲目">
<br>
播放控制:
<input type="button" onclick="mp.play()" value="播放">
<input type="button" onclick="mp.pause()" value="暂停">
<input type="button" onclick="mp.pause();mp.CurrentPosition=0" value="停止">
<br>
声道控制:
<input type="button" onclick="mp.Balance=9640" value="左声道">
<input type="button" onclick="mp.Balance=0" value="立体声">
<input type="button" onclick="mp.Balance=-9640" value="右声道">
<input type="button" onclick="alert(mp.Balance)" value="当前状态">
<br>
进度控制:
<input type="button" onclick="mp.CurrentPosition=0" value="回到开始">
<input type="button" onclick="mp.CurrentPosition+=60" value="快进一分钟">
<input type="button" onclick="mp.CurrentPosition-=60" value="快退一分钟">
<input type="button" onclick="alert(mp.Duration)" value="总长度">
<input type="button" onclick="alert(mp.CurrentPosition)" value="当前进度">
<br>
音量控制:
<script language="javascript">
function setVolume(num)
{
var mp=document.getElementByIdx("mp")
tnum=mp.Volume+num
if(tnum>0){tnum=0}
if(tnum<-10000){tnum=-10000}
mp.Volume=tnum
}
</script>
<input type="button" onclick="setVolume(200)" value="音量+">
<input type="button" onclick="setVolume(-200)" value="音量-">
<input type="button" onclick="mp.Volume=0" value="最大">
<input type="button" onclick="mp.Volume=-10000" value="最小">
<input type="button" onclick="mp.Mute=-1" value="静音">
<input type="button" onclick="mp.Mute=0" value="取消静音">
<input type="button" onclick="alert(mp.Volume)" value="当前音量">
<br>
速度控制:
<input type="button" onclick="if(mp.Rate<2){mp.Rate+=0.1}" value="加速">
<input type="button" onclick="if(mp.Rate>0.2){mp.Rate-=0.1}" value="减速">
<input type="button" onclick="mp.Rate=1" value="正常">
<input type="button" onclick="alert(mp.Rate)" value="当前速度">
<br><b>界面控制:</b><br>
字幕控制:
<input type="button" onclick="mp.ShowCaptioning=-1" value="显示">
<input type="button" onclick="mp.ShowCaptioning=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowCaptioning)" value="当前状态">
<br>
音量控制:
<input type="button" onclick="mp.ShowAudioControls=-1" value="显示">
<input type="button" onclick="mp.ShowAudioControls=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowAudioControls)" value="当前状态">
<br>
播放控制:
<input type="button" onclick="mp.ShowControls=-1" value="显示">
<input type="button" onclick="mp.ShowControls=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowControls)" value="当前状态">
<br>
媒体信息:
<input type="button" onclick="mp.ShowDisplay=-1" value="显示">
<input type="button" onclick="mp.ShowDisplay=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowDisplay)" value="当前状态">
<br>
GotoBar :
<input type="button" onclick="mp.ShowGotoBar=-1" value="显示">
<input type="button" onclick="mp.ShowGotoBar=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowGotoBar)" value="当前状态">
<br>
状 态 栏:
<input type="button" onclick="mp.ShowStatusBar=-1" value="显示">
<input type="button" onclick="mp.ShowStatusBar=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowStatusBar)" value="当前状态">
<br>
跟 踪 条:
<input type="button" onclick="mp.ShowTracker=-1" value="显示">
<input type="button" onclick="mp.ShowTracker=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowTracker)" value="当前状态">
<br>
位置控制:
<input type="button" onclick="mp.ShowPositionControls=-1" value="显示">
<input type="button" onclick="mp.ShowPositionControls=0" value="隐藏">
<input type="button" onclick="alert(mp.ShowPositionControls)" value="当前状态">
<br>
窗口缩放:
<input type="button" onclick="mp.DisplaySize=1" value="50%">
<input type="button" onclick="mp.DisplaySize=0" value="100%">
<input type="button" onclick="mp.DisplaySize=2" value="200%">
<input type="button" onclick="mp.DisplaySize=3" value="全屏">
<input type="button" onclick="alert(mp.DisplaySize)" value="当前状态">
其他格式及播放器
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="/Mbar.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="/Mbar.avi" src="Mbar.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="/mpeg/halali.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>
4.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.*.*.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" >
</OBJECT>
5.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">
<param name="AutoRewind" value=1>
<param name="FileName" value="/blogflash/2/fff.swf">
<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>
网页播放器的参数含义 Windows Media Player 网页播放器 参数含义
(默认0为否,-1或1为是)
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="-1">
<!--是否自动调整播放大小-->
<param name="AutoStart" value="-1">
<!--是否自动播放-->
<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">
<!--左右声道平衡,最左-9640,最右9640-->
<param name="BaseURL" value>
<param name="BufferingTime" value="15">
<!--缓冲时间-->
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="0">
<!--当前播放进度 -1 表示不变,0表示开头单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<!--视频1-50%, 0-100%, 2-200%,3-全屏其它的值作0处理,小数则采用四舍五入然后按前的处理-->
<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="/blog/01.wma" valuetype="ref">
<!--播放的文件地址-->
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<!--是否静音-->
<param name="PlayCount" value="10">
<!--重复播放次数,0为始终重复-->
<param name="PreviewMode" value="-1">
<param name="Rate" value="1">
<!--播放速率控制,1为正常,允许小数-->
<param name="SAMIStyle" value>
<!--SAMI样式-->
<param name="SAMILang" value>
<!--SAMI语言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
<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="-1">
<!--是否显示音量控制-->
<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">
<!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->
<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">
<!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640-->
<param name="WindowlessVideo" value="0">
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
</object>
上面的这个播放器是老式的那种,6.4版本!新式播放器是在MediaPlayer9.0以后出现的,也就是说只有装了9.0或9.0以上的播放器才能正常使用的。
-------------------------------------------------------------------------------
下面是新式播放器代码,相对以前的来说要简单很多:
<object id="player" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1">
<!--是否自动播放-->
<param NAME="Balance" VALUE="0">
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1">
<!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="-1">
<!--是否启用上下文菜单-->
<param NAME="url" value="/blog/1.wma">
<!--播放的文件地址-->
<param NAME="PlayCount" VALUE="1">
<!--播放次数控制,为整数-->
<param name="rate" value="1">
<!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="0">
<!--控件设置:当前位置-->
<param name="currentMarker" value="0">
<!--控件设置:当前标记-->
<param name="defaultFrame" value="">
<!--显示默认框架-->
<param name="invokeURLs" value="0">
<!--脚本命令设置:是否调用URL-->
<param name="baseURL" value="">
<!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="0">
<!--是否按比例伸展-->
<param name="volume" value="50">
<!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="0">
<!--是否静音-->
<param name="uiMode" value="mini">
<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
<param name="windowlessVideo" value="0">
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
<param name="fullScreen" value="0">
<!--开始播放是否自动全屏-->
<param name="enableErrorDialogs" value="-1">
<!--是否启用错误提示报告-->
<param name="SAMIStyle" value>
<!--SAMI样式-->
<param name="SAMILang" value>
<!--SAMI语言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
</object>
html的Object标签引入网页,图片,音频,视频实例集合
一、html的Object标签显示图片:
[color=Red]<object height="100%" width="100%"
type="image/jpeg" data="audi.jpeg">
</object>[/color]
<html>
<body>
<h2>Picture As Object</h2>
<object height="100%" width="100%"
type="image/jpeg" data="/i/eg_audi.jpg">
</object>
</body>
</html>
<html>
<body>
<h2>Picture As Object</h2>
<object height="100%" width="100%"
type="image/jpeg" data="http://www.fuguojian.cn/blog2/attachments/month_0812/k2008122805216.jpg">
</object>
</body>
</html>
二、html的Object标签显示网页:
[color=Red]<object type="text/html" height="100%" width="100%"
data="http://www.w3school.com.cn">
</object>[/color]
<html>
<body>
<h2>Web Page AS Object</h2>
<object type="text/html" height="100%" width="100%"
data="http://blog.fuguojian.cn">
</object>
</body>
</html>
三、html的Object标签播放音频:
[color=Red]<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="liar.wav" />
</object>[/color]
<html>
<body>
<h2>Playing The Object</h2>
<object
height="50%"
width="50%"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="AutoStart" value="1" />
<param name="FileName" value="http://www.fuguojian.cn/music/Big%20Big%20World.mp3" />
</object>
</body>
</html>
四、html的Object标签显示日历:
[color=Red]<object width="100%" height="80%"
classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">
<param name="BackColor" value="14544622">
<param name="DayLength" value="1">
</object>[/color]
<html>
<body>
<h2>Calendar Object</h2>
<object width="100%" height="80%"
classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">
<param name="BackColor" value="14544622">
<param name="DayLength" value="1">
</object>
</body>
</html>
五、html的Object标签显示图形:
[color=Red]<object width="200" height="200"
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<param name="Line0001"
value="setFillColor(255, 0, 255)">
<param name="Line0002"
value="Oval(-100, -50, 200, 100, 30)">
</object>[/color]
<html>
<body>
<h2>Graphic Object</h2>
<object width="200" height="200"
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<param name="Line0001"
value="setFillColor(255, 0, 255)">
<param name="Line0002"
value="Oval(-100, -50, 200, 100, 30)">
</object>
</body>
</html>
六、html的Object标签显示Flash:
[color=Red]<object width="400" height="40"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="http://www.fuguojian.cn/blog2/123/time.swf" width="400" height="40"></embed>
</object>[/color]
<html>
<body>
<h2>Flash Animation As Object</h2>
<object width="400" height="40"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="http://www.fuguojian.cn/blog2/123/time.swf" width="400" height="40"></embed>
</object>
</body>
</html>
七、html的Object标签播放视频:
[color=Red]<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="3d.wmv" />
</object>[/color]
<html>
<body>
<h2>Playing The Object</h2>
<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param
name="FileName"
value="http://www.ananova.com/about/vap_windows_check.wmv" />
</object>
</body>
</html>
<object> 元素可播放 QuickTime 电影
通过 object 元素,可轻松将播放 QuickTime 影片的代码添加到网页中。如果用户计算机中未安装 QuickTime 播放器,则可将 object 设
置为自动安装 QuickTime 播放器。
解决方案:
这些播放 QuickTime 影片的代码:
[color=Red]<object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="sample.mov" width="160" height="144"
autoplay="true" controller="false"
pluginspage="http://fuguojian.cn/blog2/">
</embed>[/color]</object>
<object> 元素
object 元素的 width 和 height 属性应当匹配影片的尺寸(以像素计)。
classid 可唯一地标识要使用的播放器软件。它必须设置为 "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"。该唯一?嗦氡晔读嗽诘缬安?/p>
放之前必须安装在用户 PC 上的 ActiveX 控件。如果用户未安装该 ActiveX 控件,则浏览器将自动下载并安装它。
codebase 属性规定了基准路径,该路径用于解析由 classid、data 和 archive 属性规定的相对 URL。如果未规定,则其默认值是当前文档的基
准 URL。注释:Internet Explorer 使用该属性来规定播放器的下载位置。该属性必须被设置为 "http://www.apple.com/qtactivex/qtplugin.cab"
。此位置包含 QuickTime 播放器的最新版本。
src 参数指向电影文件。
如果希望电影自动播放的话,将 autoplay 参数设置为 "true"。
如果不希望显示控制按钮,将 controller 参数设置为 "false"。
media player控制
player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置(以秒为单位)
player.controls.currentPositionString 时间格式的字符串 “0:32″
player.currentMedia.duration 返回播放文件的总长度(以秒为单位)
player.currentMedia.durationString 时间格式的字符串 “4:34″
player.settings.volume 音量 (0-100)
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音(s取值为true和false)
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态( 3:正在播放,2:暂停1:已停止)
======================================================
REAL PLAYER控制
player.DoPlay() 播放
player.DoPause() 暂停
player.DoStop() 停止
player.GetLength() 返回播放文件的总长度(以毫秒为单位)
player.GetPosition() 返回播放文件的当前时间位置(以毫秒为单位)
player.GetPlayState() 返回播放器状态(0:停止,1:连接,2:缓冲,3:播放,4:暂停,5:寻找)
player.SetPosition(n) 时间位置跳到n的地方(n取值以毫秒为单位)
player.SetVolume(n) 设置音量(n取值为0到100)
player.SetMute(s) 静音(s取值为true和false)
player.SetFullScreen() 全屏
player.setSource() 设置文件来源
这个可以播放MP3
<HTML>
<HEAD>
<TITLE>MP3播放器</TITLE>
<SCRIPT language=javascript event=OpenComplete for=Player>
Player_OpenComplete()
</SCRIPT>
<SCRIPT language=javascript event=PositionChange for=Player>
Player_PositionChange()
</SCRIPT>
<SCRIPT language=javascript event=Timer for=Player>
Player_Timer()
</SCRIPT>
<SCRIPT language=javascript event=StateChange for=Player>
Player_StateChange()
</SCRIPT>
</HEAD>
<BODY language=javascript leftMargin=0 topMargin=0 onload=”PlayInit()”>
<br><br><br>
<center>
<table width=”390″ height=”121″ background=”MP3bg.gif” border=0 cellSpacing=0 cellPadding=0 borderColorDark=#FFFFFF borderColorLight=#ff0000>
<tr>
<td height=”18″ width=”22″></td>
<td height=”18″ width=”87″></td>
<td height=”18″ width=”87″></td>
<td height=”18″ width=”72″></td>
<td height=”18″ width=”83″></td>
<td height=”18″ width=”27″></td>
</tr>
<tr>
<td height=”27″ width=”22″></td>
<td height=”27″ width=”87″></td>
<td height=”27″ width=”246″ colspan=”3″><LABEL id=FileNameLabel style=”FONT-SIZE: larger; COLOR: blue”></LABEL></td>
<td height=”27″ width=”27″></td>
</tr>
<tr>
<td height=”31″ width=”22″></td>
<td height=”31″ width=”87″></td>
<td height=”31″ width=”87″ align=center><LABEL id=TimeLabel style=”FONT-SIZE: larger; COLOR: blue”>00:00</LABEL></td>
<td height=”31″ width=”72″>
</td>
<td height=”31″ width=”83″ align=”center”><LABEL id=LengthLabel style=”FONT-SIZE: larger; COLOR: blue”>00:00</LABEL></td>
<td height=”31″ width=”27″></td>
</tr>
<tr>
<td height=”22″ width=”22″></td>
<td height=”22″ width=”87″></td>
<td height=”22″ width=”246″ colspan=”3″ align=center><DIV id=Progress style=”LEFT: 115px; WIDTH: 240px;BACKGROUND-COLOR: red”></DIV></td>
<td height=”22″ width=”27″></td>
</tr>
<tr>
<td colspan=”6″ align=center valign=bottom height=”20″ width=”388″></td>
</tr>
<tr>
<td colspan=”6″ align=center valign=bottom height=”20″ width=”388″>
<IMG id=OpenBtn onclick=”OpenBtn()” alt=FileOpen src=”open.gif” width=55><IMG id=PlayBtn onclick=”PlayBtn()” alt=Play src=”play.gif” width=55><IMG id=StopBtn onclick=”StopBtn()” alt=Stop src=”stop.gif” width=55><IMG id=PauseBtn onclick=”PauseBtn()” alt=Pause src=”pause.gif” width=55><IMG id=RewBtn onclick=”RewBtn()” alt=Rewind src=”rew.gif” width=55><IMG id=FFBtn onclick=”FFBtn()” alt=FastFoward src=”FF.gif” width=55 height=”29″>
</td>
</tr>
<tr>
<td colspan=”6″ align=center valign=bottom height=”4″ width=”388″></td>
</tr>
</table>
</center>
<OBJECT id=Player style=”VISIBILITY:hidden;” height=10 width=10 classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A>
<PARAM NAME=”Appearance” VALUE=”0″>
<PARAM NAME=”AutoStart” VALUE=”0″>
<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=”">
<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=”0″>
<PARAM NAME=”ShowPositionControls” VALUE=”0″>
<PARAM NAME=”ShowTracker” VALUE=”-1″>
<PARAM NAME=”Volume” VALUE=”-830″>
</OBJECT>
<INPUT type=file id=FileBtn style=”VISIBILITY:hidden;”>
<SCRIPT language=javascript>
var OldPos, Length, Width
function PlayInit()
{
OldPos = 0
Width = Progress.style.posWidth
Progress.style.posWidth = 0
}
function Player_OpenComplete(){Length=Player.Duration;LengthLabel.innerText=FormatTime(Length);}
function Player_Timer()
{
var CurPos
CurPos=Math.floor(Player.CurrentPosition)
alert(CurPos)
if ( CurPos != OldPos )
{
OldPos=CurPos
TimeLabel.innerText=FormatTime(CurPos)
Progress.style.posWidth=(Width * CurPos)/Length
}
}
function Player_PositionChange()
{
TimeLabel.innerText=FormatTime(Player.CurrentPosition)
Progress.style.posWidth=(Width * Player.CurrentPosition) / Length
}
function Player_StateChange()
{
if(Player.CurrentState==0){TimeLabel.innerText = FormatTime(0);Progress.style.posWidth=0}
}
function OpenBtn()
{
var fstr=”
FileBtn.click()
if (FileBtn.value==”) return
Player.FileName=FileBtn.value
fstr=FileBtn.value
var temparr=fstr.split(‘\\’)
FileNameLabel.innerText= ‘ ‘ + temparr[temparr.length-1]
Player.Run()
}
function PlayBtn(){Player.Run()}
function StopBtn(){Player.Stop()}
function PauseBtn(){Player.Pause()}
function RewBtn(){Player.CurrentPosition=Player.CurrentPosition-10}
function FFBtn(){Player.CurrentPosition=Player.CurrentPosition+10}
function FormatTime(value)
{
var min, sec, str
min=Math.floor(value / 60)
sec=Math.floor(value % 60)
if (isNaN(min)){return “00:00″}
if (min>9){str=min.toString() + “:”}else{str=”0″ + min.toString() + “:”}
if (sec>9){str=str + sec.toString()}else{str=str + “0″ + sec.toString()}
return str
}
</SCRIPT>
</BODY></HTML>