暴风影音以其解码的功能强大而著称,虽然他根本上仍是WMP的升级,但是并不是简单的升级,大量的及玛奇的加入使其使用率日益增大。
其他的网页嵌入如Windows Media Player 和RealPlayer等,使用他们开发需要很多的if判断,因为他们支持的格式各不相同,必须同时使用其中的2个以上才能达到预期的目的。
但是经常关注他的会发现,他的网页嵌入应用不是太多,此文章便是为此而写,并且笔者也做出了利用播放影音的网页播放器!
网页嵌入暴风影音关键代码:
<object id="StormPlayer" style="left: 3px; width:98%; top: 3px; height:425px;" codebase="http://dla.baofeng.com/webstorm/storm.cab#version=3,8,9,7"
classid="clsid:BDBB259C-9729-484F-BF9D-778149B375B2">
<param name="URL" value="test.avi">
<PARAM NAME="ShowUI" VALUE="0">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="autoPlay" VALUE="2">
<PARAM NAME="mute" VALUE="0">
<PARAM NAME="DropEnable" VALUE="0">
<PARAM NAME="EnableFullScreen" VALUE="0">
<PARAM NAME="ShowVideo" VALUE="1">
<param name="loop" value="1"/>
</object>
有心者可以再VS中引用一下暴风的Storm.dll,会发现很多关于暴风影音的函数和属性,这些函数和属性同样可以再js中使用。下面列举一些比较有用的:
属性:
Bool mute{set;get} 设置或者获取静音状态
Int Position 当前的播放位置,得到的为毫秒数
URL 播放的路径
Visible 是否可见,这个可见与在object中设置并不相同,object中设置后activeX并不运行加载多媒体,但是此设置为false后期仍在运行,只是不可见而已
Volume 设置获取音量
方法:
Stop() 播放停止
SetFullScreen() 全屏显示
Play() 开始播放
Pause() 播放暂停
GetFullScreen() 是否为全屏状态
GetDuration() 获取总长度
Close() 关闭
使用实例:
简单播放控制:
<table cellpadding="0" cellspacing="0" style="width:545px; background-image:url('playerimage/bg10.gif'); background-repeat:no-repeat; height: 28px; margin:0px auto">
<tr>
<td style="width:35px;">
<img id="play" src="playerimage/play.gif" οnclick="StormPlayer.Play();document.getElementById('pause').style.display='block';this.style.display='none'" width="17" height="19" onMouseOver="this.src='playerimage/play01.gif'" onMouseOut="this.src='playerimage/play.gif'" alt="播放" style="cursor:pointer; display:none"/>
<img id="pause" src="playerimage/pause.gif" οnclick="StormPlayer.Pause();document.getElementById('play').style.display='block';this.style.display='none'" width="17" height="19" onMouseOver="this.src='playerimage/pause01.gif'" onMouseOut="this.src='playerimage/pause.gif'" alt="暂停" style="cursor:pointer"/>
</td>
<td style="width:35px;">
<img src="playerimage/stop.gif" οnclick="StormPlayer.Stop();StormPlayer.visible=false;" width="17" height="19" onMouseOver="this.src='playerimage/stop01.gif'" onMouseOut="this.src='playerimage/stop.gif'" alt="停止" style="cursor:pointer"/>
</td>
<td style="width:208px;" align="center">
<div style="float:left;margin:0px 0px 6px 6px;display:inline; height: 13px;" id="sliderDemo1"></div>
</td>
<td style="width:85px" align="left">
<div style="height: 23px">
<span><img src="playerimage/speak.gif" οnclick="StormPlayer.mute=true" width="17" height="19" onMouseOver="this.src='playerimage/speak01.gif'" onMouseOut="this.src='playerimage/speak.gif'" alt="静音" style="cursor:pointer; float:left"/></span>
<div style="width:45px;float:left;margin:8px 0 0 6px;display:inline;height:2px;font-size:1px;" id="yinliangid"><img src="playerimage/volume.gif" width="60%" height="2" alt="全屏" /></div>
</div>
</td>
<td style="width:28px">
<img src="playerimage/full.gif" οnclick="StormPlayer.SetFullScreen()" width="17" height="19" onMouseOver="this.src='playerimage/full01.gif'" onMouseOut="this.src='playerimage/full.gif'" alt="" style="cursor:pointer"/>
</td>
<td>
<div id="sliderDetail" style="color:White; height:21px; width:82px; margin-left:10px">
</td>
</tr>
</table>
毫秒格式化为hh:mm:ss格式:
//格式化毫秒为:hh:mm:ss
function FormatTime(value)
{
return Zeroize(parseInt(value/3600000))+":"+Zeroize(parseInt((value%3600000)/60000))+":"+Zeroize(parseInt((value%60000)/1000));
}
//格式化(h->0h)
function Zeroize(value, length) {
if (!length) length = 2;
value = String(value);
for (var i = 0, zeros = ''; i < (length - value.length); i++) {
zeros += '0';
}
return zeros + value;
}
程序中实现了简单播放控制、声音拖动、视频拖动等,具体源码可在本人博客资源中下载!!!
http://download.csdn.net/user/wufeishimeng