知青小院

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1291|回复: 0

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

[复制链接]

481

主题

1382

帖子

4万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
45827
发表于 2016-7-14 21:00:35 | 显示全部楼层 |阅读模式

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

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

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

首先改动[media]标签的解析,将第200行的代码:
  • $message = preg_replace("/\[media=([\w,]+)\]\s*([^\[\<\r\n]+?)\s*\[\/media\]/is", "[media]\\2[/media]", $message);


修改为:
  • $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行的代码:
  • $message = preg_replace("/\[flash(=(\d+),(\d+))?\]\s*([^\[\<\r\n]+?)\s*\[\/flash\]/is", "[media]\\4[/media]", $message);


修改为:
  • $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标签中加入解析视频的代码:
  • function openVideo(a,b) {
  •         $(a).html('<img src="static/image/mobile/images/icon_load.gif" />');
  •         var w = $(a).width();
  •         var h = w * 0.85;
  •         if(/youku/.test(b)){ //解析优酷
  •                 b = b.match(/id_(.*?)\.html|sid\/(.*?)\/v/);
  •                 b = 'http://player.youku.com/embed/' + (b[1] ? b[1] : b[2]);
  •         }else if(/bilibili|acg\.tv/.test(b)){ //解析B站
  •                 b = b.match(/o\/av(.*?)\/|aid=(.*?)&/);
  •                 b = 'http://www.bilibili.com/video/av' + (b[1] ? b[1] : b[2]);
  •         }else{
  •                 $(a).html('不支持此视频地址显示:' + b);
  •                 return;
  •         }
  •         $(a).append('<iframe width=0 height=0 src="' + b + '" scrolling=no frameborder=0 allowfullscreen></iframe>');
  •         $(a).children('iframe').load(function(){
  •                 $(a).children('img').remove();
  •                 $(a).children('iframe').css({'width':w,'height':h});
  •         })
  • }


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

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



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|Archiver|知青小院 ( 鲁ICP备19028199号 )

GMT+8, 2020-5-29 05:31 , Processed in 0.045697 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表