首页 > 代码库 > <object>标签引入播放器
<object>标签引入播放器
视窗系统 Media Video 是微软推出的一种流媒体格式,他是在“同门”的ASF(Advanced Stream Format)格式升级延伸来得.在同等视频质量下,WMV格式的体积非常小,因此非常适合在网上播放和传输。视窗系统 Media Player9兼容所有格式的WMV,官方编码器是视窗系统 Media Encoder ,不过如果你想转制 高质量的wmv文件,那你一定要有超大的内存来处理数据...
无意中发现CASTPOST的播放器能自己定义大小,对于WMV格式的在线播放能说已足够快了,然后就费了好大劲把一些出色的短片和一些经典的MTV转化WMV格式放了上来,尽管目前不能下载了,不过只要不是连接人数过多,播放起来还是非常流畅的^_^
WMP加入了ActiveX解码器控件,不仅能放曲子,还能放Flash和其他视频文件
<object align=middle classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" class="OBJECT" id=MediaPlayer width=196 height=196>
<param name=ShowStatusBar value=http://www.mamicode.com/0>
<param name=Filename value="http://202.116.*.*/video/story/chinese/hynh/b.wmv">
<embed type=application/x-oleobject codebase="http://activex.microsoft.com/activex/con ... n/nsmp2inf.cab#Version=5,1,52,701" >
</embed>
</object>
想用WMP连续播放请参照ASX元文件使用讲解:使用ASX播放列表吧
上面的这个播放器是老式的那种,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="http://www.mamicode.com/-1">
<!--是否自动播放-->
<param NAME="Balance" VALUE="http://www.mamicode.com/0">
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="http://www.mamicode.com/-1">
<!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="http://www.mamicode.com/-1">
<!--是否启用上下文菜单-->
<param NAME="url" value="http://www.mamicode.com/blog/1.wma">
<!--播放的文件地址-->
<param NAME="PlayCount" VALUE="http://www.mamicode.com/1">
<!--播放次数控制,为整数-->
<param name="rate" value="http://www.mamicode.com/1">
<!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="http://www.mamicode.com/0">
<!--控件设置:当前位置-->
<param name="currentMarker" value="http://www.mamicode.com/0">
<!--控件设置:当前标记-->
<param name="defaultFrame" value="">
<!--显示默认框架-->
<param name="invokeURLs" value="http://www.mamicode.com/0">
<!--脚本命令设置:是否调用URL-->
<param name="baseURL" value="">
<!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="http://www.mamicode.com/0">
<!--是否按比例伸展-->
<param name="volume" value="http://www.mamicode.com/50">
<!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="http://www.mamicode.com/0">
<!--是否静音-->
<param name="uiMode" value="http://www.mamicode.com/mini">
<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
<param name="windowlessVideo" value="http://www.mamicode.com/0">
<!--如果是0能允许全屏,否则只能在窗口中查看-->
<param name="fullScreen" value="http://www.mamicode.com/0">
<!--开始播放是否自动全屏-->
<param name="enableErrorDialogs" value="http://www.mamicode.com/-1">
<!--是否启用错误提示报告-->
<param name="SAMIStyle" value>
<!--SAMI样式-->
<param name="SAMILang" value>
<!--SAMI语言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
</object>
----------------------------------------------------------------
RealOne播放器代码:
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=300>
<param name="_ExtentX" value="http://www.mamicode.com/11298">
<param name="_ExtentY" value="http://www.mamicode.com/7938">
<param name="AUTOSTART" value="http://www.mamicode.com/-1">
<param name="SHUFFLE" value="http://www.mamicode.com/0">
<param name="PREFETCH" value="http://www.mamicode.com/0">
<param name="NOLABELS" value="http://www.mamicode.com/-1">
<param name="SRC" value="rtsp://211.89.225.1/encoder/cnr3";>
<param name="CONTROLS" value="http://www.mamicode.com/Imagewindow">
<param name="CONSOLE" value="http://www.mamicode.com/clip1">
<param name="LOOP" value="http://www.mamicode.com/0">
<param name="NUMLOOP" value="http://www.mamicode.com/0">
<param name="CENTER" value="http://www.mamicode.com/0">
<param name="MAINTAINASPECT" value="http://www.mamicode.com/0">
<param name="BACKGROUNDCOLOR" value="http://www.mamicode.com/#000000">
</object> <object id="vid2" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=30>
<param name="_ExtentX" value="http://www.mamicode.com/11298">
<param name="_ExtentY" value="http://www.mamicode.com/794">
<param name="AUTOSTART" value="http://www.mamicode.com/-1">
<param name="SHUFFLE" value="http://www.mamicode.com/0">
<param name="PREFETCH" value="http://www.mamicode.com/0">
<param name="NOLABELS" value="http://www.mamicode.com/-1">
<param name="SRC" value="rtsp://211.89.225.1/encoder/cnr3";>
<param name="CONTROLS" value="http://www.mamicode.com/ControlPanel">
<param name="CONSOLE" value="http://www.mamicode.com/clip1">
<param name="LOOP" value="http://www.mamicode.com/0">
<param name="NUMLOOP" value="http://www.mamicode.com/0">
<param name="CENTER" value="http://www.mamicode.com/0">
<param name="MAINTAINASPECT" value="http://www.mamicode.com/0">
<param name="BACKGROUNDCOLOR" value="http://www.mamicode.com/#000000">
</object>
------------------------------------------------------------------
看着非常多非常复杂的样子,其实就是多了些播放器参数,能不要...
Real Player 网页播放器 参数含义
参数:autostart 属性:True或是False 作用:指定是否自动播放指定的源文件
参数:backgroundcolor 属性:所有用符号“#”开头的16进制数值或是所有预定义的颜色作用:指定图像窗口的背景颜色
参数:center 属性:True或是False 作用:指定片断使用初始编码大小播放,并且在图像窗口的中心。
参数:classid 属性:"clsid:CFCDAA03-8BE4-1lcf-B84B0020AFBBCCFA:** 作用:用于指定ActiveX控件的唯一的字符串标示,能认出嵌入的RealPalyer播放器。
参数:console 属性:所有字符串作用:能将各种不同的RealPlayer控制聚集在网页上,这样他们能交互使用或是保持独立,而且互相不影响
参数:controls 属性:ImageWindow,All,ControlPanel,PlavButton,PlayOnlyButton, PauseButton,StopButton,FFCtrl,RWCtrl,MuteCtrl,MuteVolume,VolumeSlider,PositionSlider,TACCtrl,HomeCtrl,InfoVolumePanel,InfoPanel,StatusBar,StatusField,PositionField 作用:能让你指定那些控制是可见的。
参数:height 属性:所有整数值作用:指定RealPlayer元素的高度,单位:像素
参数:id 属性:所有字符串作用:为标签中的RealPlayer元素指定名字。
参数:imagestatus 属性:True或是False 作用:指定是否在图像窗口中显示状态信息,默认值是true
参数:loop 属性:True或是False 作用:能让你指定片断是否无限循环
参数:maintainaspect 属性:True或是False 作用:默认RealPlayer拉伸所有的片断来充满整个图像窗口。
参数:name 属性:所有字符串作用:为标签中的RealPlayer元素指定名字(在标签中使用id)
参数:nojava 属性:True或是False 作用:避免启动Java虚拟机
参数:nolabels 属性:True或是False 作用:能禁止显示标题或是版权信息(realplayer5.0以上时,他是垃圾...)
参数:nologo 属性:True或是False 作用:避免RealPlayer启动时在图像窗口中显示
参数:numloop 属性:所有整数值作用:让你能够指定文件片循环的次数,不必参数loop
参数:prefetch 属性:True或是False 作用:指定在播放前,RealPlayer是否能获得流描述信息,默认值是False
参数:region 属性:所有字符串作用:同SMIL一起使用。允许你指定使用HTML代替SMIL
参数:scriptcallbacks 属性:用逗号分割的列表作用:指定浏览器的回调监视(好高级的东东!)
参数:shuffle 属性:True或是False 作用:同多文件片的ram文件或是SMIL文件一起使用。能让RealPlayer随机播放列表中的文件
参数:src 属性:所有合法的相对或是完整的URL 作用:指定播放的文件或是源文件的地址
参数:type 属性:字符串作用:为嵌入插件指定MIME类型
参数:width 属性:所有整数值作用:指定RealPlayer元素的宽度
RealPlayer的一些函数、方法和过程
这是 Real Player ActiveX Control Library (Version 1.0) 的所有函数和方法,有兴趣能研究一下。
function GetSource: WideString;
procedure SetSource(const lpszNewValue: WideString);
function GetConsole: WideString;
procedure SetConsole(const lpszNewValue: WideString);
function GetControls: WideString;
procedure SetControls(const lpszNewValue: WideString);
function GetNoLabels: WordBool;
procedure SetNoLabels(bNewValue: WordBool);
function GetAutoStart: WordBool;
procedure SetAutoStart(bNewValue: WordBool);
function GetAutoGotoURL: WordBool;
procedure SetAutoGotoURL(bNewValue: WordBool);
function GetVolume: Smallint;
procedure SetVolume(nVol: Smallint);
function GetMute: WordBool;
procedure SetMute(bMute: WordBool);
function GetLoop: WordBool;
procedure SetLoop(bVal: WordBool);
function GetImageStatus: WordBool;
procedure SetImageStatus(bEnable: WordBool);
function GetPacketsTotal: Integer;
function GetPacketsReceived: Integer;
function GetPacketsOutOfOrder: Integer;
function GetPacketsMissing: Integer;
function GetPacketsEarly: Integer;
function GetPacketsLate: Integer;
function GetBandwidthAverage: Integer;
function GetBandwidthCurrent: Integer;
procedure DoPlayPause;
procedure DoStop;
procedure DoNextItem;
procedure DoPrevItem;
function CanPlayPause: WordBool;
function CanStop: WordBool;
function HasNextItem: WordBool;
function HasPrevItem: WordBool;
function HasNextEntry: WordBool;
function HasPrevEntry: WordBool;
procedure DoNextEntry;
procedure DoPrevEntry;
procedure AboutBox;
procedure EditPreferences;
procedure HideShowStatistics;
function IsStatisticsVisible: WordBool;
procedure DoGotoURL(const url: WideString; const target: WideString);
procedure DoPlay;
procedure DoPause;
function GetPosition: Integer;
function GetPlayState: Integer;
function GetLength: Integer;
function GetTitle: WideString;
function GetAuthor: WideString;
function GetCopyright: WideString;
SWFObject的使用是非常简单的,只需要包含
swfobject.js
这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入Flash媒体资源了。 下面是一个最简单的范例:
<script type="text/javascript" src="http://www.mamicode.com/swfobject.js"></script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>
让我们看看这些代码是如何工作的
<div id="flashcontent">[...]</div>
首先,我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换,当客户端没有安装Flash播放器的时候,这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);
创建一个新的SWFObject实例,并且传入一下参数:
swf - SWF文件路径
id - 您为这个SWF文件分配的id值,它将用于给embed与object标签设定name属性,以便于可以支持
swliveconnect
的功能,如动态传入变量
width - 宽度
height - 高度
version - FlashPlayer需要的版本号,它可以详细到 ‘主版本号.小版本号.细节‘,例如:
"6.0.65"
。一般地,我们只需传入主版本即可,例如:
"6"
。
background-color - Flash资源的背景色,16进制格式
此外,还有如下可选参数:
quality - 画面质量,默认为
"high"
。
xiRedirectUrl - 详见ExpressInstall相关
redirectUrl - 没有安装相应版本的播放器后自动跳转的目标地址
detectKey - 这是当忽略检测时,SWFObject将去url地址中查找的变量,默认值为“detectflash”,后续有详细介绍
so.write("flashcontent");
将Flash资源应用到DOM里,在浏览器显示出来。
细节
SWFObject 的灵活性非常好。您完全可以事先写好HTML的其他部分,最后再回过头来添加Flash内容。这样可以确保在客户端没有Flash的情况下,用户不会一无所获;也可以确保针对搜索引擎,做了什么样的关键词优化。您完全不用像以前那样担心客户端的各种状况
SWFObject兼容当前各种主流浏览器,如:PC上的IE5/5.5/6, Netscape 7/8,Firefox, Mozilla, and Opera。Mac上的IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+,各种浏览器的后续版本也会继续支持
SWFObject检测Flash播放器版本从3开始到最新的版本号,而且也消灭了IE中“激活”的麻烦。这里有相关背景。
SWFObject可以方便地检查版本细节,例如我们需要v.6.0 r65 (or 6,0,65,0) 来处理SWF资源,就可以添加如下代码:
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");
SWFObject的版本检测可以人工忽略。如果在特定环境下您不希望SWFObject检测版本号,那么只需要传递一个参数在HTML页面中,就可以了。SWFObject可以捕获这个参数并且跳过检测,直接写入Flash嵌入代码到DOM中。用于忽略版本检测的变量名是“detectflash”,以下是一个例子:
<a href="http://www.mamicode.com/mypage.html?detectflash=false">Bypass link</a>
SWFObject 范例
以上我们接触到的范例都最基础的,接下来我们列举一些其他功能,尤其是传入参数、变量这些使用频率较高的行为。
传入Flash内联参数的简单范例
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
这里可以看到Flash支持的内联参数列表:full list of the current parameters and their possible values(adobe.com官方资源)
采用"Flashvars"参数传入变量
用Flashvars是在预加载Flash时传入数据的最佳做法,语法格式与GET变量串非常类似,如:
variable1=value1&variable2=value2&variable3=value3
SWFObject帮助您将这项工作变得更加明确化
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.write("flashcontent");
</script>
这些变量将会保存在
_root
这个MovieClip对象里。
SWFObject还可以方便地直接从URL中接受参数传入Flash中,例如你有这样一个URL:
http://www.example.com/page.html?variable1=value1&variable2=value2
。采用
getQueryParamValue()
方法你就可以轻松获取这些参数,并将它们传入Flash,例如:
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");
</script>
getQueryParamValue()
方法同样可以获取JavaScript的Location对象的hash值“
location.hash
”来与swf内部进行通信。这里是一个采用SWFObject的应用程序,其中用到了
location.hash
对象:链接地址
在SWFObject中应用Express Install(利用官方自动升级接口)
SWFObject全面支持AdobeFlash播放器的自动升级功能(从6.0.65起的FlashPlayer支持在swf内部自动升级!),这样用户完全不用离开您的网页就能完成播放器的升级了。
首先,上传官方的expressinstall.swf到您的服务器上,然后使用
useExpressInstall
方法指定这个swf文件的地址就可以了,例如:
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall(‘expressinstall.swf‘);
so.write("flashcontent");
</script>
您可以安装一个低版本的Flash播放器然后访问这个页面看到效果
在SWFObject原文件压缩包中您可以找到具体的使用细节,您可以自己定制ExpressInstall的流程。
如果您的Flash影片在弹出窗口中,或者您希望用户在完成了ExpressInstall后重定向到其他地址,你可以采用
xiRedirectUrl
属性,来自动完成这一步骤。例如:
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall(‘expressinstall.swf‘);
so.setAttribute(‘xiRedirectUrl‘, ‘http://www.example.com/upgradefinished.html‘); // must be the absolute URL to your site
so.write("flashcontent");
</script>
-------------------------------------------------
独特优势
多年以来,各种各样的Flash播放器版本检测代码层出不穷,包括嵌入脚本也有许多。我们在这一部分针对流行的几种方法进行一个比较。
1) Adobe官方做法
这就是经典的Object标签和Embed标签配合做法,也是目前最常用的做法:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="http://www.mamicode.com/sameDomain" />
<param name="movie" value="http://www.mamicode.com/mymovie.swf" />
<param name="quality" value="http://www.mamicode.com/high" />
<param name="bgcolor" value="http://www.mamicode.com/#ffffff" />
<embed src="http://www.mamicode.com/mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
虽然是目前最常用的方法,但仍然有一些问题。
缺乏播放器版本检测 没有播放器插件版本检测,用户会获得非常糟糕的体验,他们会在不知情的情况下看到ActiveX插件安装入口,这样会导致大部分用户离开。而且,用低版本播放器播放高版本的swf文件,会导致更多潜在问题,而用户会将一切问题归咎于您的产品
Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容
不符合XHTML规范 - 在HTML和XHTML中都没有
embed
标签HTML or XHTML。因为
object
标签在不同浏览器中的诡异表现,我们不得不用embed标签来完善最终效果。
2) 仅采用Object标签 / Flash satay
这种方法在2002年的A List Apart article出现之后开始大面积流行,这里有两个例子:
‘仅含Object标签‘
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">
<param name="quality" value="http://www.mamicode.com/high">
<param name="bgcolor" value="http://www.mamicode.com/#FFFFFF">
<!--[if !IE]> <-->
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="http://www.mamicode.com/high">
<param name="bgcolor" value="http://www.mamicode.com/#FFFFFF">
<param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
Flash satay
<object type="application/x-shockwave-flash
data="http://www.mamicode.com/c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="http://www.mamicode.com/c.swf?path=movie.swf" />
<img src="http://www.mamicode.com/noflash.gif"
width="200" height="100" />
</object>
可用性问题 - 采用 Flash Satay 的话, 一些屏幕阅读器会忽略swf内容.
Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容
缺乏播放器版本检测 没有播放器插件版本检测,用户会获得非常糟糕的体验,他们会在不知情的情况下看到ActiveX插件安装入口,这样会导致大部分用户离开。而且,用低版本播放器播放高版本的swf文件,会导致更多潜在问题,而用户会将一切问题归咎于您的产品
早期的的Safari会忽略
param
标签 - 在这些版本:2.0 (Tiger) 或者 1.3 (Panther) 或者可能 1.2.8 (前Panther) 之前,Safari 完全忽略
param
标签。这将会让你的Flashvars等参数无法传入。
3) ‘small flash movie on the index page‘ 检测方法
这个方法会通过在首页放一个swf文件去访问
$version
变量来返回版本信息。
问题在于:
内页无检测 - 内页如果不放着这个swf就无法检测
“激活”问题
不符合HTML或者XHTML规范
影响搜索引擎索引排名
4) Adobe官方 Flash Player Detection 模块
Adobe官方这个模块非常不错,然而仍然有一些不足,它采用两种方法来检测
Flash自身检测,如上面提到的"small Flash movie on the index page" - 缺点已经提过了
Javascript - 混乱的代码让你的HTML变得非常难以维护
深入讨论在这里。
5) 用纯粹的JS来检测、嵌入
这种方法看起来不错,但是仍然缺乏规范,而且消耗开发成本
检测不够完善 - 通常只能检测到当前的Flash播放器发行版,而且升级也需要手工参与
增加了 更多 代码 - 难以维护的DOM结构
解决方案太笨重 - SWFObject进行了多次优化,非常轻量
function GetClipWidth: Integer;
function GetClipHeight: Integer;
function CanPlay: WordBool;
function CanPause: WordBool;
procedure SetPosition(lPosition: Integer);
function GetNumLoop: Integer;
procedure SetNumLoop(lVal: Integer);
function GetCenter: WordBool;
procedure SetCenter(bVal: WordBool);
function GetNoLogo: WordBool;
procedure SetNoLogo(bVal: WordBool);
function GetMaintainAspect: WordBool;
procedure SetMaintainAspect(bVal: WordBool);
function GetBackgroundColor: WideString;
procedure SetBackgroundColor(const pVal: WideString);
function GetStereoState: WordBool;
function GetLiveState: WordBool;
function GetShowStatistics: WordBool;
procedure SetShowStatistics(bVal: WordBool);
function GetShowPreferences: WordBool;
procedure SetShowPreferences(bVal: WordBool);
function GetShowonmouseover WordBool;
procedure SetShowAbou
<object>标签引入播放器