CSS/HTML代码分别实现网页播放mp3、flv、wmv、Flash

于 2011-12-27 13:41:20 发布
阅读量6.8k 收藏 2
点赞数
分类专栏： Html 文章标签： flv path flash function firefox windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/comeonJ/article/details/7105553
版权

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

1、mp3音频文件的播放

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

view plaincopy to clipboardprint?
< 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"/> 
< 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文件直接下载到了本地放在了项目中，直接在项目中使用相对地址来访问它，最终使用的代码如下：
view plaincopy to clipboardprint?
document.write('<embedwidth="' + (mediaWidth || 400) + 'px" height="' + (mediaHeight || 27) +'px" name="plugin" src="' + ctxPath + '/scripts/gPlayer.swf?audioUrl='+ mediaURL + '" type="application/x-shockwave-flash" />'); 
document.write('<embedwidth="' + (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/ 里面有相关的使用文档，具体怎么样看文档的，我自己的调用代码是：

view plaincopy to clipboardprint?
function flvPlayer(flv_path, ctxPath, flv_title, flvWidth, flvHeight) {  
    flv_title = flv_title || "u70b9u51fbu64adu653eu89c6u9891";      
    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>');    
} 
function flvPlayer(flv_path, ctxPath, flv_title, flvWidth, flvHeight) {
flv_title = flv_title || "u70b9u51fbu64adu653eu89c6u9891";
  flvWidth  = flvWidth  || 430;
flvHeight = flvHeight || 380;

var swfPath = ctxPath.concat("/scripts/player_flv_maxi.swf");

document.write('<objecttype="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('<paramname="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 mediaplayer播放器时，加载完成后就一边框，什么也没有，但是，如果事件将这播放器放在一隐藏的div中，在系统加载完成后再将该div显示便可正常的播放文件了，主要的JS代码：

view plaincopy to clipboardprint?
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 Media Player components..." width="' + (mediaWidth || 430) + '"height="' + (mediaHeight || 380) + '" title="' + (mediaTitle || '') +'" autostart="false" loop="1" />');  
    }  
} 
function mediaPlayer(mediaURL, ctxPath, mediaType, mediaTitle, mediaWidth, mediaHeight) {
if(...) {
  ...
} else {
  document.write('<embedsrc="' + mediaURL + '" mce_src="' + mediaURL + '" style="border: 1pxsolid #666;" type="application/x-oleobject"classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" standby="Loading Media Player components..." width="' + (mediaWidth || 430) + '"height="' + (mediaHeight || 380) + '" title="' + (mediaTitle || '') +'" autostart="false" loop="1" />');
}
}

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

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

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

view plaincopy to clipboardprint?
var noFlvMedia = document.getElementById("noFlvMedia");  
if(null != noFlvMedia) {  
    noFlvMedia.style.display = '';  
} 
var noFlvMedia = document.getElementById("noFlvMedia");
if(null != noFlvMedia) {
noFlvMedia.style.display = '';
}

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

4、flash
这没什么好说的，直接贴代码：

view plaincopy to clipboardprint?
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>');  
} 
function flashPlayer(flash_path, swfWidth, swfHeight) {
document.write('<objecttype="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

絮飘
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值