现在的位置: 首页 > 综合 > 正文

DHTML的多媒体标签 ,web上的多媒体影音播放器

2013年10月11日 ⁄ 综合 ⁄ 共 3367字 ⁄ 字号 评论关闭

1 <bgsound>
看名字就知道是背景声音,最老的web页播放音乐的方法,非可视标签,非W3C推荐。
常用属性:
loop      音乐在激活时的循环播放次数,-1为无限。
src       音乐文件的URL地址,绝对或相对都可以。
volume    声音的音量设置,取值-10,000到0。
autostart 是否自动播放,取值true或false。
例:
<bgsound src="url" autostart="true" loop="-1" />

2 <img>
传统的图片标签,不过很多人不知道还能用来做web播放器,功能也比估计的强大。
常用属性:
dynsrc    要在窗口中显示的视频剪辑或音乐。
start     引发播放开始的事件,缺省值是fileopen,文件打开时,取值fileopen、mouseover。
controls  在视频窗口下附加播放控制条。
loop      音乐在激活时的循环播放次数,-1为无限。
loopdelay 音频或视频文件的延时播放时间,毫秒数。
该标签还能接受传统用法的height/width/hspace/alt等等属性。
例:
<img dynsrc="url" height="1" width="1" loop="1" />

3 <embed>
最初来自netscape的标签,当然ie也支持,不过兼容性微有瑕疵。是构造一个比较专业的web多媒体播放器的首选方法之一。非W3C推荐
src       还是媒体文件所在路径。
autostart 是否在音乐档下载完之后就自动播放。
loop      是否循环播放,接受true、false、整数。
hidden    是否隐藏控制画面,true、no。
starttime 设定歌曲开始播放的时间,格式 分:秒。
volume    音量的大小,值在0至100。
width     面板的高度,默认单位px。
high      面板的宽度。
align     面板和旁边文字的对齐方式,一般取值top、bottom、center、baseline、 left、right。
controls  面板的外观,可取值console 正常面板、smallconsole 小面板、playbutton 只有播放按钮、pausecutton 只有暂停按钮、stopbutton 只有停止按钮、volumelever 只有音量调节。
例:
<embed src="url" autostart="true" loop="true" hidden="true"></embed>

4 <object>
在一个web页引入对象,传说中,W3C打算将来把包括img在内的多媒体标签都统一到object下。简单的说,就是引入对象,然后由对象播放媒体文件。IE对object做的播放器兼容最好,不过不是用标准属性,还是Ms的自定义套路,所以对ff有点困难。目前一般处理就是object和embed进行嵌套,DW就是这么做的。
常用属性:
type      MIME类型值。
classid   要引入的对象的clsid标识。
codebase  对象的文件所在位置,url。
这个标签牵涉到兼容,所以比较复杂,我还是找了几个例子说明:

一个WMV播放器,传统的object套embed,属性名大多用过,所以应该容易看懂。
<object id="MediaPlayer" windth="100" height="100" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading..." type="application/x-oleobject">
<param name="filename" value="媒体文件的url"/>
<param name="showcontrols" value="true"/>
<param name="showstatusbar" value="false"/>
<param name="showdisplay" value="false"/>
<param name="autostart" value="false"/>
<embed type="application/x-mplayer2" src="videofilename.wmv" name="MediaPlayer" eidth="100" height="100" showcontrols="true" showstatusbar="false" showdisplay="false" autostart="false"></embed>
</object>

下面是3个流传较广的据说符合W3C标准的播放器,我就不多改动,修饰下而已。
在线媒体播放--Google Video and YouTube
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf 8755581808731033658" width="400" height="326" id="VideoPlayback">
  <param name="movie" value="http://video.google.com/googleplayer.swf" docId=8755581808731033658" />
  <param name="allowScriptAcess" value="sameDomain" />
  <param name="quality" value="best" />
  <param name="bgcolor" value="#FFFFFF" />
  <param name="scale" value="noScale" />
  <param name="salign" value="TL" />
  <param name="FlashVars" value="playerMode=embedded" />
</object>

Windows Media Player,没有用Media Player特有的classid,IE5.5, IE6,IE7,Opera,Firefox,Safari下通过。
<object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" width="320" height="260">
  <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"/>
  <param name="autostart" value="true"/>
  <param name="controller" value="true"/>
</object>

QuickTime movies 没有embed标签
<object?classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab width="320" height="260">
  <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/diables.mov" />
  <param name="controller" value="true" />
  <param name="autoplay" value="false" />
  <!--[if !IE]>-->
  <object type="video/quicktime data="http://www.sarahsnotecards.com/catalunyalive/diables.mov" width="320" height="260">
  <param name="autoplay" value="false" />
  <param name="controller" value="true" />
  </object>
<!--<![endif]-->
</object>

 

抱歉!评论已关闭.