关于在discuz中mp3附件自动添加Windows Media播放器插件的方法的文章网上有很多,只要修改./templates/default/discuzcode.htm文件就可以了,但是毕竟不是所有浏览器都装有wm播放器插件的,而flash播放器就不同了,除了iOS以外应该都是支持的。

一个wordpress播放器插件(Degradable HTML5 audio and video)很不错,支持html5,于是把它作为论坛的音乐播放器。

刚开始只是直接拿flash播放器播放,可是发现chrome对它支持很不好,无法显示文件名和进度,更无法调节,于是决定改用html5标签。

下载插件,解压,取出player.swf,放到images/common/目录,然后用添加wm的同样的方法修改templates/default/discuzcode.htm文件,插入代码:

<!--{if fileext($attach['filename']) == 'mp3'}-->

<p><audio loop controls >

<source type="audio/mpeg" src="attachment.php?aid=$aidencode">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="290" height="24" class="attachment">

<param name="movie" value="images/common/player.swf?soundFile=attachment.php?aid=$aidencode%3D&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0x357DCE&rightbghover=0x4499EE&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0x8EC2F4&autostart=no&loop=no" />

<param name="quality" value="high" />

<param value="transparent" name="wmode" />

<embed src="data:images/common/player.swf?soundFile=attachment.php?aid=$aidencode%3D&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0x357DCE&rightbghover=0x4499EE&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0x8EC2F4&autostart=no&loop=no" width="290" height="24" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>

</object></audio></p>

<!--{/if}-->

这样,在支持html5的浏览器里显示html5播放器,而在不支持的浏览器中audio将不被识别,只是里面的flash播放器代码起作用。可是这里有个问题,Firefox支持audio标签,可是它只支持Ogg Vorbis和Wav,那只能让它使用flash播放了。可是怎么把播放器代码剥离出来呢?那就试试javascript吧。原先模块里有解决方法,但是使用的是jQuery库,只是实现一个小功能,就不调用70多k的代码了,自己写一个。

在</audio>标签后加入:

<script type="text/javascript">if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) {dst=document.getElementsByTagName("audio")[0]; up=document.getElementsByTagName("object")[0]; dst.parentNode.removeChild(dst); document.write(up.outerHTML);}</script>

可是保存了以后打开论坛,发现discuz给自动转换成wm代码了,费解。难道是只能提取非html标签?那就在object标签外边加个自定义标签player:

<!--{if fileext($attach['filename']) == 'mp3'}-->

<p><audio loop controls >

<source type="audio/mpeg" src="attachment.php?aid=$aidencode">

<player><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="290" height="24" class="attachment">

<param name="movie" value="images/common/player.swf?soundFile=attachment.php?aid=$aidencode%3D&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0x357DCE&rightbghover=0x4499EE&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0x8EC2F4&autostart=no&loop=no" />

<param name="quality" value="high" />

<param value="transparent" name="wmode" />

<embed src="data:images/common/player.swf?soundFile=attachment.php?aid=$aidencode%3D&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0x357DCE&rightbghover=0x4499EE&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0x8EC2F4&autostart=no&loop=no" width="290" height="24" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>

</object></player></audio>

<script type="text/javascript">if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) {dst=document.getElementsByTagName("audio")[0]; up=document.getElementsByTagName("player")[0]; dst.parentNode.removeChild(dst); document.write(up.outerHTML);

}</script></p>

<!--{/if}-->

嗯,这回不错,Chrome显示的是audio播放器,Firefox显示的是flash播放器。

附discuz音频文件上传后自动添加播放器方法:

在<dl class="t_attachlist">之前添加:
<!--Alioth Music Start-->
<!--{if fileext($attach['filename']) == 'mp3'}-->
<p><object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="64"><param name="autostart" value="0" /><param name="url" value="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" autostart="0" type="application/x-mplayer2" width="400" height="64"></embed></object></p>
<!--{elseif fileext($attach['filename']) == 'wma'}-->
<p><object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="64"><param name="autostart" value="0" /><param name="url" value="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" autostart="0" type="audio/x-ms-wma" width="400" height="64"></embed></object></p>
<br><br><br>
<!--{/if}-->
<!--Alioth Music End-->

在$attach[attachicon] <span style="white-space: nowrap" id="attach_$attach[aid]" οnmοuseοver="showMenu(this.id, false, 2)"><a href="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp&sid=$sidauth" target="_blank"><strong>$attach[filename]</strong></a></span> ($attach[attachsize])前添加:
<!--Alioth Music Start-->
<!--{if fileext($attach['filename']) == 'mp3'}-->
<p><object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="64"><param name="autostart" value="0" /><param name="url" value="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" autostart="0" type="application/x-mplayer2" width="400" height="64"></embed></object></p>
<!--{elseif fileext($attach['filename']) == 'wma'}-->
<p><object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="64"><param name="autostart" value="0" /><param name="url" value="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&amp;k=$k&amp;t=$timestamp" autostart="0" type="audio/x-ms-wma" width="400" height="64"></embed></object></p>
<br><br><br>
<!--{/if}-->
<!--Alioith Music End-->

文章来源:unixoss.com

转载请保留出处。

Tags: 
discuz
HTML5
audio标签

转载于:https://www.cnblogs.com/stylesheet/archive/2011/01/02/1948733.html

discuz自动添加兼容html5标签的音乐播放器相关推荐

  1. web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现

    Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...

  2. html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc

    基于HTML5技术的音乐播放器的设计与实现 基于HTML5技术的音乐播放器的设计与实现 常志强 刘正余 杨劲楠 皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在 我的关注中得到本文献的 ...

  3. 基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现

    Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...

  4. html音乐播放器论文,基于HTML5技术的音乐播放器的设计与实现.docx

    基于HTML5技术的音乐播放器的设计与 实现 常志强刘正余杨劲楠 皖西学院电子与信息工程学院 摘要: 本文采用IITML5技术,设计了一款音乐播放器,可以实现在线播放音乐,也可 以加载终端里存储的音乐 ...

  5. html5在线音乐列表播放器,简洁的html5 mp3列表音乐播放器代码

    特效描述:简洁的html5 mp3列表 音乐播放器代码.html5网页音乐播放器,mp3播放器,简洁音乐播放器 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 标题歌手 00:00/0 ...

  6. html5模仿手机音乐播放器(添加音乐进度条和时长)

    今天用html+js+cs写了一个类似手机音乐播放器的小东东,代码规范性不是很好,高手切勿喷,新手可以看看,其中歌词同步js代码参考了一个老师的代码.自己添加的是点击按钮页面滑动,和上一曲下一曲播放, ...

  7. html5开发一个音乐播放器,HTML5开发学习(1):使用aduio标签打造音乐播放器

    关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待.本文为该系列(html5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注. ...

  8. HTML5移动端音乐播放器(启蒙篇)

    这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分.前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目. 在线地址:请猛击这里 源码:请猛击这里 ...

  9. 使用HTML5实现网页音乐播放器

    转自http://www.php.cn/html5-tutorial-402849.html 本篇文章主要介绍了HTML5网页音乐播放器的示例代码,内容挺不错的,现在分享给大家,也给大家做个参考. 本 ...

最新文章

  1. U盘安装 CentOS 7
  2. VS2010 连接SQLSERVER数据库步骤
  3. # 管道已结束_CIPP内衬紫外线固化法用于污水管道非开挖修复
  4. MongoDB——Shell的基本操作及使用窍门
  5. 交叉编译和交叉调试环境的搭建及使用
  6. java 关键字volatile的作用
  7. 2018-2019-1 20165211 实验四 外设驱动程序设计
  8. 数组排序(冒泡、排序)
  9. github mac 添加 ssh_计算机专业MAC操作技巧(二)
  10. 简答String类的操作特点以及static方法的注意事项
  11. Qt的工程文件讲解 .pro
  12. jQuery最新1.4 版本的十五个新特性
  13. 电商工具箱之阿里巴巴获取商品
  14. 2017知乎看山杯总结(多标签文本分类)
  15. 【cvpr2020】Referring Image Segmentation via Cross-Modal Progressive Comprehension
  16. vs快捷键:ctor+双击Tab,快速生成构造函数
  17. Linux硬盘管理:分区、GParted分区操作
  18. linux编写守护进程
  19. PPT制作网格型封面页实例教程
  20. tomcat 启用https协议

热门文章

  1. PopupWindow正确使用方式
  2. 映射java是什么_java – 映射,绑定和解析有什么区别?
  3. ValueAnimator 使用注意事项
  4. MicroPython-GPRS教程之TPYBoardv702GPRS功能测试
  5. linux 远程脚本批量 scopy文件
  6. 如何用开源经历为你的简历增加光彩
  7. C++ 中的动态库和静态库(Windows)
  8. myeclipse/eclipse方法和类的自动注解
  9. 30天敏捷生活(7):生成行动计划
  10. 轻松实现Web数据库的安全