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="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:// .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="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:// .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]" onmouseover="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-->

疯狂暗示打赏按钮

本文标签：

声明：本文由代码号注册/游客用户【翠萱】供稿发布，本站不对用户发布的discuz添加兼容html5标签音乐播放器的办法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：翠萱» https://www.ebingou.cn/dmh/16159.html

很赞哦！ ()