discuz自动添加兼容html5标签的音乐播放器
关于在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]&k=$k&t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&k=$k&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]&k=$k&t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&k=$k&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]&k=$k&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]&k=$k&t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&k=$k&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]&k=$k&t=$timestamp" /><param name="PlayCount" value="100" /><embed src="attachment.php?aid=$attach[aid]&k=$k&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
转载请保留出处。
转载于:https://www.cnblogs.com/stylesheet/archive/2011/01/02/1948733.html
discuz自动添加兼容html5标签的音乐播放器相关推荐
- web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
- html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现 基于HTML5技术的音乐播放器的设计与实现 常志强 刘正余 杨劲楠 皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在 我的关注中得到本文献的 ...
- 基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...
- html音乐播放器论文,基于HTML5技术的音乐播放器的设计与实现.docx
基于HTML5技术的音乐播放器的设计与 实现 常志强刘正余杨劲楠 皖西学院电子与信息工程学院 摘要: 本文采用IITML5技术,设计了一款音乐播放器,可以实现在线播放音乐,也可 以加载终端里存储的音乐 ...
- html5在线音乐列表播放器,简洁的html5 mp3列表音乐播放器代码
特效描述:简洁的html5 mp3列表 音乐播放器代码.html5网页音乐播放器,mp3播放器,简洁音乐播放器 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 标题歌手 00:00/0 ...
- html5模仿手机音乐播放器(添加音乐进度条和时长)
今天用html+js+cs写了一个类似手机音乐播放器的小东东,代码规范性不是很好,高手切勿喷,新手可以看看,其中歌词同步js代码参考了一个老师的代码.自己添加的是点击按钮页面滑动,和上一曲下一曲播放, ...
- html5开发一个音乐播放器,HTML5开发学习(1):使用aduio标签打造音乐播放器
关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待.本文为该系列(html5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注. ...
- HTML5移动端音乐播放器(启蒙篇)
这段时间公司一直在做一个PC的教育类单页应用,庞大复杂,涉及非常多H5的知识,音频就是其中的一部分.前些天偷台风的闲暇时写了一个移动端音乐播放器,作为练手项目. 在线地址:请猛击这里 源码:请猛击这里 ...
- 使用HTML5实现网页音乐播放器
转自http://www.php.cn/html5-tutorial-402849.html 本篇文章主要介绍了HTML5网页音乐播放器的示例代码,内容挺不错的,现在分享给大家,也给大家做个参考. 本 ...
最新文章
- U盘安装 CentOS 7
- VS2010 连接SQLSERVER数据库步骤
- # 管道已结束_CIPP内衬紫外线固化法用于污水管道非开挖修复
- MongoDB——Shell的基本操作及使用窍门
- 交叉编译和交叉调试环境的搭建及使用
- java 关键字volatile的作用
- 2018-2019-1 20165211 实验四 外设驱动程序设计
- 数组排序(冒泡、排序)
- github mac 添加 ssh_计算机专业MAC操作技巧(二)
- 简答String类的操作特点以及static方法的注意事项
- Qt的工程文件讲解 .pro
- jQuery最新1.4 版本的十五个新特性
- 电商工具箱之阿里巴巴获取商品
- 2017知乎看山杯总结(多标签文本分类)
- 【cvpr2020】Referring Image Segmentation via Cross-Modal Progressive Comprehension
- vs快捷键:ctor+双击Tab,快速生成构造函数
- Linux硬盘管理:分区、GParted分区操作
- linux编写守护进程
- PPT制作网格型封面页实例教程
- tomcat 启用https协议