现手头上的一个项目需要播放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) {<br /> flv_title = flv_title || "/u70b9/u51fb/u64ad/u653e/u89c6/u9891";<br /> flvWidth = flvWidth || 430;<br /> flvHeight = flvHeight || 380;<br /> var swfPath = ctxPath.concat("/scripts/player_flv_maxi.swf");<br /> document.write('<object type="application/x-shockwave-flash" data="' + swfPath + '" width="' + flvWidth + '" height="' + flvHeight + '">');<br /> document.write('<param name="movie" value="' + swfPath + '" />');<br /> document.write('<param name="allowFullScreen" value="true" />');<br /> 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" />');<br /> document.write('</object>');<br /> }

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

function mediaPlayer(mediaURL, ctxPath, mediaType, mediaTitle, mediaWidth, mediaHeight) {<br /> if(...) {<br /> ...<br /> } else {<br /> 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" />');<br /> }<br /> }

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

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

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

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

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

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

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

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

分别实现网页播放mp3、flv、wmv、Flash，代码兼容FireFox相关推荐

1. html4播放mp3,在网页播放MP3、WMA音乐的代码

   一.在网页播放MP3.WMA音乐的代码(极速模式和兼容模式都显示) border="0" width="460" height="68" t ...

2. jw player flash网页播放器 参数说明以及应用配置

   jw player flash网页播放器 参数说明以及应用配置 1.参数解释 这些参数可以配置被嵌入到html中的播放器的行为和外观.如果使用swfobject.js,可以用addVariable() ...

3. 最简单的基于Flash的流媒体示例 网页播放器（HTTP，RTMP，HLS）

   ===================================================== Flash流媒体文章列表: 最简单的基于Flash的流媒体示例:RTMP推送和接收(Acti ...

4. 最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）

   音视频领域,再次搜索,依然是大神雷霄骅的杰作.再次致敬,一路走好. ===================================================== Flash流媒体文章列表 ...

5. java mp3,audio - 在Java中播放.mp3和.wav？

   audio - 在Java中播放.mp3和.wav? 如何在我的Java应用程序中播放.mp3和.wav文件? 我正在使用Swing. 我尝试在互联网上寻找类似这样的例子: public void p ...

6. 关于JMF不能播放MP3的问题解决方法

   关于JMF不能播放MP3的问题解决方法 JMF官方下载地址 问题来源 其他人的解决办法 一种可行的解决办法 用JLayer播放MP3 下载地址 示例 JMF官方下载地址 JMF下载地址:JMF 2.1 ...

7. html flash 循环播放,在网页中插入flv格式的flash视频怎么让其循环播放_html/css_WEB-ITnose...

   求解 在网页中插入flv格式的flash视频怎么让其循环播放 回复讨论(解决方案) 求解 在网页中插入flv格式的flash视频怎么让其循环播放 这个得让flash coder设置flash播放器吧 ...

8. Dewplayer MP3网页播放器

   顺便提一下jMP3 (javaScript MP3 player):http://www.sean-o.com/jquery/jmp3/ 官网:http://www.alsacreations.fr/ ...

9. 网页视频播放php拉伸代码,网页在线播放mp4/flv等格式视频方法，CuPlayer(酷播)详细使用方法(附源代码)...

   最近有好几个项目都需要在网页上播放视频文件(自己上传的),视频格式包括mp4.flv等等.现在的网站都对用户体验有所要求,所以网站上都不是单一的一行行文字了,都会选择放上很多图片.视频等,这样整体看上 ...

最新文章

1. saspython知乎_评分模型效用度量指标如何解析？(含Python、R、SAS代码）
2. Slog92_使用React框架进行前端开发4
3. linux系统中变量,Linux系统中的环境变量知识详解
4. CentOS7.0安装Nginx 1.7.4
5. windows_study_2
6. Windows 7 ship party
7. android用sax解析xml,Android:采用SAX解析XML实例
8. 编译报错程序集版本高于所引用的程序集的版本
9. oracle like 前缀,algorithm – 在ORACLE中搜索最长前缀的最快方法
10. android中获取 bitmap 像素的颜色 之吸管取色功能
11. vulhub-靶场实战-安装
12. 手机之家签名工具_IOS签名工具：魔力签
13. 掌握这些方法论后我工资涨了一倍！
14. SpringMVC里拦截器preHandle里的参数意思
15. 百度AI实现图片转文字-python
16. icloud显示账户详情不可用,苹果icloud账户详情不可用怎么办 iPhone提示当前账户详情不可用怎么回事...
17. android ic读卡器,NFC读卡器APP
18. MAC查看SVN版本日志
19. ACM—TC 联合招新赛1题解
20. 【张亚飞】 Adobe Flash Player和Flash Player 检测工具包

热门文章

1. 交叉编译wpa_supplicant常见问题总结
2. entity、bo、vo、po 如何理解和区分？
3. ESP32开发路程WIFI篇——极简连接WIFI，模拟设备连接阿里云，ESP32连接阿里云
4. 各大门户免费登录入口
5. SAP采购发票预制校验发票号重复
6. 前端对接微信公众号网页开发流程，授权对接
7. YYLabel的几个实用小技巧
8. 极客日报第 37 期：苹果官网出现价格 Bug；大众 CEO点评“苹果造车”；Spring Cloud 2020.0 正式发布
9. Hive on Hbase
10. 腾讯云服务器如何实现内网互联？