用mejs播放器来替代失效的Discuz播放器

837

前Discuz因为安全原因撤下了三款基于Flash的播放器:个人空间里播放音乐盒的mp3player.swf,播放mp3音乐的player.swf, 和播放flv格式的Flash文件的flvplayer.swf,使得Discuz网站上音乐盒,mp3音乐,和flv格式的Flash动画无法照常使用。至今尚未解决。所以本文讨论下如何用一个叫MediaElement.js (简称mejs)的html5播放器来替代上述失效的三种播放器。
Before After

首先我们要做些准备工作:将jQuery库和mejs库下载到网站上。然后要修改文件 template/default/common/header_common.htm,在它的最后添加

<script type="text/javascript" src="{$_G[setting][jspath]}jquery.min.js"></script>
<script type="text/javascript" src="{$_G[setting][jspath]}mediaelement/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="{$_G[setting][jspath]}mediaelement/mediaelementplayer.min.css" />
<script type="text/javascript">
    var jqm = jQuery.noConflict(true);
</script>

这里我们假定网站将jQuery库放在statis/js,将meja库放在static/js/mediaelement,不然要改动上面的代码指向实际地址。 上面这句jQuery代码的作用见我前文(链接)第二部分里的说明。

1。替换音乐播放器

需要改动的代码在文件 source/function/function_discuzcode.php 里,将函数 parseaudio 中的下面这句

return '<span id="'.$randomid.'"></span><script type="text/javascript" reload="1">$(\''.$randomid.'\').innerHTML=AC_FL_RunContent(\'FlashVars\', \'soundFile='.urlencode($url).'\', \'width\', \'290\', \'height\', \'24\', \'allowNetworking\', \'internal\', \'allowScriptAccess\', \'never\', \'src\', \''.STATICURL.'image/common/player.swf\', \'quality\', \'high\', \'bgcolor\', \'#FFFFFF\', \'menu\', \'false\', \'wmode\', \'transparent\', \'allowNetworking\', \'internal\');</script>';

改为

return '<audio id="'.$randomid.'" controls preload type="audio/mp3" width="290" src="'.$url.'" ></audio><script type="text/javascript">jqm("#'.$randomid.'").mediaelementplayer();</script>';

b)替换日志中的音乐播放器

需要改动的代码在文件 source/function/function_blog.php 里,将函数 blog_flash 中的下面这段

$swf_url = urlencode(str_replace('&', '&', $swf_url));
$html = '<object id="audioplayer_SHAREID" height="24" width="290" data="'.STATICURL.'image/common/player.swf" type="application/x-shockwave-flash">
    <param value="'.STATICURL.'image/common/player.swf" name="movie"/>
    <param value="autostart=yes&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xF06A51&rightbghover=0xAF2910&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile='.$swf_url.'" name="FlashVars"/>
    <param value="high" name="quality"/>
    <param value="false" name="menu"/>
    <param name="allowscriptaccess" value="never">
    <param name="allowNetworking" value="internal">
    <param value="#FFFFFF" name="bgcolor"/>
</object>';

改为

return '<audio id="audioplayer_SHAREID" controls preload type="audio/mp3" width="290" src="'.$swf_url.'" ></audio><script type="text/javascript">jqm("#audioplayer_SHAREID").mediaelementplayer();</script>';

c)替换分享中的音乐播放器

需要改动的代码在文件 static/js/home.js 里,将函数 showFlash 中的下面这句

var musicFlash = '<object id="audioplayer_SHAREID" height="24" width="290" data="' + STATICURL + 'image/common/player.swf" type="application/x-shockwave-flash">'
    + '<param value="' + STATICURL + 'image/common/player.swf" name="movie"/>'
    + '<param value="autostart=yes&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xF06A51&rightbghover=0xAF2910&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile=FLASHADDR" name="FlashVars"/>'
    + '<param value="high" name="quality"/>'
    + '<param value="false" name="menu"/>'
    + '<param value="#FFFFFF" name="bgcolor"/>'
    + '</object>';

改为

var musicFlash = '<audio id="audioplayer_SHAREID" controls preload autoplay type="audio/mp3" src="' + flashvar + '"></audio><script type="text/javascript">jqm("#audioplayer_SHAREID").mediaelementplayer({ audioWidth: 290 });</script>';

再在同一个函数里稍后的这句
flashObj.innerHTML = flashHtml;

后加上

// http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml
var codes = flashObj.getElementsByTagName("script");
for (var i = 0; i < codes.length; i++) eval(codes[i].text);

最后再将函数 stopMusic 里的这句

$(musicFlash).SetVariable('closePlayer', 1);

改成

$(musicFlash).player.pause();

2。替换视频播放器

旧播放器 新播放器

需要改动的代码在文件 source/function/function_discuzcode.php 里,将函数 parsemedia 中的下面这句

return '<span id="'.$randomid.'"></span><script type="text/javascript" reload="1">$(\''.$randomid.'\').innerHTML=AC_FL_RunContent(\'width\', \''.$width.'\', \'height\', \''.$height.'\', \'allowNetworking\', \'internal\', \'allowScriptAccess\', \'never\', \'src\', \''.STATICURL.'image/common/flvplayer.swf\', \'flashvars\', \'file='.rawurlencode($url).'\', \'quality\', \'high\', \'wmode\', \'transparent\', \'allowfullscreen\', \'true\');</script>';

改成

return '<video id="'.$randomid.'" controls preload width="'.$width.'" height="'.$height.'" src="'.$url.'" ></video><script type="text/javascript">jqm("#'.$randomid.'").mediaelementplayer();</script>';

b)替换日志中的视频播放器

需要改动的代码在文件 source/function/function_blog.php 里,将函数 blog_flash 中的下面这段

$html = '<span id="'.$randomid.'"></span><script type="text/javascript" reload="1">$(\''.$randomid.'\').innerHTML=AC_FL_RunContent(\'width\', \''.$width.'\', \'height\', \''.$height.'\', \'allowNetworking\', \'internal\', \'allowScriptAccess\', \'never\', \'src\', \''.STATICURL.'image/common/flvplayer.swf\', \'flashvars\', \'file='.rawurlencode($swf_url).'\', \'quality\', \'high\', \'wmode\', \'transparent\', \'allowfullscreen\', \'true\');</script>';

改成

$html = ‘&lt;video id=”‘.$randomid.'” controls preload width=”‘.$width.'” height=”‘.$height.'” src=”‘.$swf_url.'” &gt;&lt;/video&gt;&lt;script type=”text/javascript”&gt;jqm(“#’.$randomid.'”).mediaelementplayer();&lt;/script&gt;’;

c)替换分享中的视频播放器, 需要改动的代码在文件 source/include/spacecp/spacecp_share.php 里,将下面这句

'flv' => $_G['style']['imgdir'].'/flvplayer.swf?&autostart=true&file='.urlencode($link),

改成

'flv' => $link,

再在文件 static/js/home.js 里,将函数 showFlash 中的下面这句

var videoFlash = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="450">'
    + '<param value="transparent" name="wmode"/>'
    + '<param value="FLASHADDR" name="movie" />'
    + '<param name="allowScriptAccess" value="never" />'
    + '<param name="allowNetworking" value="none" />'
    + '<embed src="FLASHADDR" wmode="transparent" allowfullscreen="true" type="application/x-shockwave-flash" width="480" height="450" allowScriptAccess="never" allowNetworking="internal"></embed>'
    + '</object>';

后加上

var videoHtml5 = '<video id="videoplayer_SHAREID" controls preload autoplay width="480" height="450" src="' + flashvar + '" ></video><script type="text/javascript">jqm("#videoplayer_SHAREID").mediaelementplayer();</script>';

再在同一个函数里稍后的这句

flashvar = encodeURI(flashvar);

前加上

var flvReg = new RegExp('.flv$', 'ig');
if (flvReg.test(flashvar)) {
    flashHtml = videoHtml5;
}

上面的修改仅涉及原来Discuz的支持flv格式的视频播放器。但在这基础上略做改动也能支持当前最流行的视频格式mp4。

以上是提供的一种思路,这种方法还是很多年前,目前新版的已经进行了很多修复。