好友团

24小时服务电话

134-2860-6060

查看: 627|回复: 0

[综合教程] Discuz! X3在手机版中播放诸如优酷之类视频的方法

[复制链接]
发表于 2017-6-7 20:41:29 | 显示全部楼层 |阅读模式
填写您的邮件地址,订阅我们的精彩内容:
[受理编号:SL-2565]
填写您的邮件地址,订阅我们的精彩内容:
手机版支持播放外链视频的方法,可支持触屏版,也可支持标准版。
首先找到discuz的ubb代码解析文件(source/function/function_discuzcode.php),在大约199行的时候可以看到,如果用户打开的是手机版,那么[media]、[audio]、[flash]这3个标签都会被放弃解析,统一输出成XXXXX这种格式。

首先改动[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框架加载页面就行了。


回复
〖销售站〗一站式品质服务平台. 一体化商城系统.【www.xiaoshouzhan.com】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

销售站-一体化商城系统!
 
 
Q Q|技术部
销售|销售部
客服|销售站实体店
分流|销售站实体店
视频解析群:
好记吧
产品售后群:
站长源码(交易平台)
域名拍卖群:
域名拍卖群
产品维权群:
藤县站
微信客服中心:
/images/niwota00000000300.jpg
工作时间:
8:00-18:00
 
版权所有:好友团

QQ|关于我们|手机版|( 桂ICP备19008987号|网站地图  | Sponsor: Friends group