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文件，插入代码：

<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://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>

</object></audio>

这样，在支持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：

<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="quality" value="high" />

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

</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>

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

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

在<dl class="t_attachlist">之前添加：


<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>

<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>
 



在$attach[attachicon] <a href="attachment.php?aid=$attach[aid]&k=$k&t=$timestamp&sid=$sidauth" target="_blank">$attach[filename]</a> ($attach[attachsize])前添加：


<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>

<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>

文章来源：unixoss.com

转载请保留出处。

Tags:

discuz

HTML5

audio标签

秒客网

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

相关文章