分别实现网页播放mp3、flv、wmv、Flash,代码兼容FireFox

 现手头上的一个项目需要播放mp3音频及FLV与WMV格式的视频文件,在网上找了不少资料,发现都是调用系统自带的播放器,而且许多都不能正常的调用。经过自己不断的调试、摸索,终于解决了所有问题,完成的效果还是比较满意的!~

1、mp3音频文件的播放

正常情况下应该是调用系统自还的播放器,但考虑到代码的简洁性和对系统的最大兼容性,我使用了Google Reader提供的网页多媒体播放器,其实就一Flash文件,如果不想写额外代码,直接调用它

<embed height="400px" width="300px" name="gPlayer" src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=yourMp3Addr.mp3" type="application/x-shockwave-flash"/>

其中yourMp3Addr.mp3为mp3的文件地址,但因为需要访问google的网站,考虑到性能与稳定性,所以我把swf文件直接下载到了本地放在了项目中,直接在项目中使用相对地址来访问它,最终使用的代码如下:
document.write('<embed width="' + (mediaWidth || 400) + 'px" height="' + (mediaHeight || 27) + 'px" name="plugin" src="' + ctxPath + '/scripts/gPlayer.swf?audioUrl=' + mediaURL + '" type="application/x-shockwave-flash" />');

用JS写了个方法调用,简化代码,方便重复调用,值得注意的是该播放器不但可以播放mp3音频文件,也可以播放flv的视频文件,只需将参数名audioUrl更改为videoUrl,即
播放mp3音频文件:audioUrl=yourMp3Addr.mp3
播放Flv视频文件:  videoUrl=yourFlvAddr.flv
如果想加载完成后自动播放,只需在地址后加上&autoPlay=true参数即可
2、flv
虽然Google Reader播放器也可以播放,但它的外观样式、播放器按钮及加载图片等貌似均不能设置,于是使用的是另一Flv播放器,地址为:http://code.google.com/p/flvplayer/ 里面有相关的使用文档,具体怎么样看文档的,我自己的调用代码是:

function flvPlayer(flv_path, ctxPath, flv_title, flvWidth, flvHeight) { flv_title = flv_title || "/u70b9/u51fb/u64ad/u653e/u89c6/u9891"; flvWidth = flvWidth || 430; flvHeight = flvHeight || 380; var swfPath = ctxPath.concat("/scripts/player_flv_maxi.swf"); document.write('<object type="application/x-shockwave-flash" data="' + swfPath + '" width="' + flvWidth + '" height="' + flvHeight + '">'); document.write('<param name="movie" value="' + swfPath + '" />'); document.write('<param name="allowFullScreen" value="true" />'); document.write('<param name="FlashVars" value="flv=' + flv_path + '&title=' + flv_title + '&width=' + flvWidth + '&height=' + flvHeight + '&playercolor=808094&bgcolor1=9293a9&bgcolor2=808094&buttoncolor=dddddd&buttonovercolor=f9bf37&slidercolor1=dddddd&slidercolor2=cccccc&sliderovercolor=f9bf37&loadingcolor=ffff00&showstop=1&showvolume=1&showtime=1&showfullscreen=1&srt=1" />'); document.write('</object>'); }

3、wmv
wmv视频文件的播放是我花费时间最长的,因为在IE下很简单的,随便在网上找段调用系统内置播放器的代码就可以搞定,但我想兼容FireFox,所以不断的尝试,不断的测试,后来我发现了一个非常BT的东西,在FF下调用系统自带的如windows media player播放器时,加载完成后就一边框,什么也没有,但是,如果事件将这播放器放在一隐藏的div中,在系统加载完成后再将该div显示便可正常的播放文件了,主要的JS代码:

function mediaPlayer(mediaURL, ctxPath, mediaType, mediaTitle, mediaWidth, mediaHeight) { if(...) { ... } else { document.write('<embed src="' + mediaURL + '" mce_src="' + mediaURL + '" style="border: 1px solid #666;" type="application/x-oleobject" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" standby="Loading Windows Media Player components..." width="' + (mediaWidth || 430) + '" height="' + (mediaHeight || 380) + '" title="' + (mediaTitle || '') + '" autostart="false" loop="1" />'); } }

很普通的调用系统自带的windows media player播放器,这个都没有什么,页面调用代码,如下:

<div id="noFlvMedia" style="display:none;" mce_style="display:none;"> <mce:script type="text/javascript" src="${ctx}/scripts/mediaPlayer.js" mce_src="${ctx}/scripts/mediaPlayer.js"></mce:script> <mce:script type="text/javascript"><!-- mediaPlayer('${ctx}/${af.map.media_path}', '', '', '${af.map.media_name}'); // --></mce:script> </div>

页面加载完成后将该div显示出来

var noFlvMedia = document.getElementById("noFlvMedia"); if(null != noFlvMedia) { noFlvMedia.style.display = ''; }

虽然调用系统自带的播放器有些局限性,但最起码已经实现了在大部分系统中正常播放功能

4、flash
这没什么好说的,直接贴代码:

function flashPlayer(flash_path, swfWidth, swfHeight) { document.write('<object type="application/x-shockwave-flash" data="' + flash_path + '" width="' + swfWidth + '" height="' + swfHeight + '" id="flashPlayer">'); document.write('<param name="movie" value="' + flash_path + '" />'); document.write('<param name="allowScriptAcess" value="sameDomain" />'); document.write('<param name="menu" value="false" />'); document.write('<param name="wmode" value="opaque" />'); document.write('<param name="quality" value="best" />'); document.write('<param name="bgcolor" value="#F0F0F0" />'); document.write('<param name="scale" value="noScale" />'); document.write('</object>'); }


另:以上代码均为项目中使用的代码,均能正常运行、显示。本人操作系统及浏览器版本如下
    操作系统:windows 7
    浏览器:   IE 8.0.1068.0
                   FireFox 3.0.11

 

你可能感兴趣的:(windows,function,Flash,Path,firefox,flv)