<!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>
Q uicktime 是一个跨浏览器的播放插件,可以实现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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异