Discuz! X3在手机版中播放诸如优酷之类视频的方法

不得不吐槽下康盛在移动端挖了多少个坑，又弃了多少坑，从掌上论坛、触屏版在到独立客户端，全成了太监。现在又跑去搞X社区，触屏版刚出个模子就被弃了，导致很多东西都不完善，连标准版都不及！

这次主要说一下手机版支持播放外链视频的方法，可支持触屏版，也可支持标准版。

首先找到discuz的ubb代码解析文件（source/function/function_discuzcode.php），在大约199行的时候可以看到，如果用户打开的是手机版，那么[media]、[audio]、[flash]这3个标签都会被放弃解析，统一输出成[media]XXXXX[/media]这种格式。

首先改动[media]标签的解析，将第200行的代码：

1. $message = preg_replace("/\[media=([\w,]+)\]\s*([^\[\<\r\n]+?)\s*\[\/media\]/is", "[media]\\2[/media]", $message);

修改为：

1. $message = preg_replace("/\[media=([\w,]+)\]\s*([^\[\<\r\n]+?)\s*\[\/media\]/is", "<p class=\"hm\" onclick=\"openVideo(this,'\\2')\"><img src=\"static/image/common/vd.gif\" /></p>", $message);

在来改动[flash]标签的解析，将205行的代码：

1. $message = preg_replace("/\[flash(=(\d+),(\d+))?\]\s*([^\[\<\r\n]+?)\s*\[\/flash\]/is", "[media]\\4[/media]", $message);

修改为：

1. $message = preg_replace("/\[flash(=(\d+),(\d+))?\]\s*([^\[\<\r\n]+?)\s*\[\/flash\]/is", "<p class=\"hm\" onclick=\"openVideo(this,'\\4')\"><img src=\"static/image/common/vd.gif\" /></p>", $message);

然后修改模版文件（template/default/touch/forum/viewthread.htm），在任意一个JS标签中加入解析视频的代码：

1. function openVideo(a,b) {
2.         $(a).html('<img src="static/image/mobile/images/icon_load.gif" />');
3.         var w = $(a).width();
4.         var h = w * 0.85;
5.         if(/youku/.test(b)){ //解析优酷
6.                 b = b.match(/id_(.*?)\.html|sid\/(.*?)\/v/);
7.                 b = 'http://player.youku.com/embed/' + (b[1] ? b[1] : b[2]);
8.         }else if(/bilibili|acg\.tv/.test(b)){ //解析B站
9.                 b = b.match(/o\/av(.*?)\/|aid=(.*?)&/);
10.                 b = 'http://www.bilibili.com/video/av' + (b[1] ? b[1] : b[2]);
11.         }else{
12.                 $(a).html('不支持此视频地址显示：' + b);
13.                 return;
14.         }
15.         $(a).append('<iframe width=0 height=0 src="' + b + '" scrolling=no frameborder=0 allowfullscreen></iframe>');
16.         $(a).children('iframe').load(function(){
17.                 $(a).children('img').remove();
18.                 $(a).children('iframe').css({'width':w,'height':h});
19.         })
20. }

以上完成修改，可以用手机打开一个有视频的帖子看看效果了

注：我在这里只写了优酷和B站的解析，其他视频地址的解析暂时没有写，不过有了上面的JS做参考很简单就可以写出支持其他站的视频外链。其原理就是，按照视频URL匹配出VID然后组成可以加载出HTML5播放器的URL在通过iframe框架加载页面就行了。