立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

Discuz功能改进:一键贴

热度 7已有 1368 次阅读2015-10-3 07:05 PM |个人分类:Discuz

Discuz提供的微博功能相对简陋,在微博上除了能写文字外,也就是能用bb代码来加超链接了,连图片也没法贴。我以前讨论过如何扩展微博功能来让用户使用bb代码在上面贴图(链接)。这是个很自然的想法,因为一是超链接在微博里就是用bb代码加的,二是日志后的评论里可以用bb代码来贴图。所以这样的做法是对Discuz内置功能的一个自然延伸。在储存格式上有两种可能,一是储存用户填写的bb代码,然后在显示前转换为html代码。二是在储存前将bb代码转换成html代码,在数据库里存html代码,这样就能直接显示了。两种方法都是可行的而且各有利弊。存bb代码便于用户编辑修改(不过现在微博还没有修改功能),而且bb代码相当简约。上面提到的两个内置的贴超链接和贴图功能存的都是html代码,但内置的日志里贴的视频的功能则采取了存bb代码的做法,也许是因为把它转换成html里的object代码会在储存时多占很大空间。


近来我看到汉山网让用户直接贴图片的地址,然后系统将它转换成图片显示,称之为一键完成又称一键通和一键贴(链接)。我觉得那样的做法比用bb代码好。一是对用户更方便,不需要记bb代码了。二是储存内容干净,没有bb代码。三是用户修改起来也方便,因为按原样储存没对用户输入做任何转换。当然这种做法也有一定缺陷:
1)它对图片的识别是依据地址结尾处图片文件名的后缀(如.png),所以它没法识别用短地址代表的图片,比如它可以识别 https://www.google.com/images/srpr/logo11w.png 但却没法识别与此等价的短地址 http://tinyurl.com/lubjeod
而用bb代码就没有这局限。
2) 它没法让用户选择图片显示尺寸,而bb代码则不难扩充来支持这个自由度。
3) 用户没有只贴图片地址不要贴图的自由。
但感觉这些都不是大问题。关于1)短地址用的人不多,而且能在浏览器里轻易就能转换成普通地址。关于2),因为各人的微博都显示在一起,所以以网站统一显示尺寸为好。关于3),可以去掉地址最前端的protocol来避免转换。

1。一键贴图

下面我们来考虑下如何实现对这种贴图办法的支持。

新的代码加在了 /source/include/space/space_doing.php 里,在从数据库里取出了微博内容后将图片地址转换成了html里的图片元素,举例而言,将图片地址
https://www.google.com/images/srpr/logo11w.png 转换成了类似于下面的html图片元素 <img src="https://www.google.com/images/srpr/logo11w.png" /> 下面两段代码里的最后两句是新加的。第一段是处理微博主贴的内容,第二段是处理微博回复的内容: $query = C::t('home_doing')->fetch_all_search($start, $perpage, 1, $uids, '', $searchkey, '', '' ,'', 1, $doid, $f_index); foreach($query as $value) { if($value['status'] == 0 || $value['uid'] == $_G['uid'] || $_G['adminid'] == 1) { require_once libfile('function/url2html'); $value['message'] =url2html($value['message']); foreach(C::t('home_docomment')->fetch_all_by_doid($doids) as $value) { require_once libfile('function/url2html'); $value['message'] = url2html($value['message']); 具体的转换代码定义在一个新加的文件 /source/function/function_url2html.php 里: function url2html ($message) { $message = preg_replace("/(https?:\/\/\S+?.(?:jpe?g|png|gif))/ie", "url2html_img('\\1')", $message); return $message; } function url2html_img($url) { return "<a href='$url' target='_blank' style='vertical-align: top;'> <img src='$url' style='max-height: 150px;'/></a>"; } 上面修改的文件 /source/include/space/space_doing.php 是在显示整个微博页时用的,还有一个文件/source/include/spacecp/spacecp_doing.php 则处理了加了一个回复后对新回复所属的微博主贴包括其下所有回复的显示更新的情形,因此也需要做类似修改: foreach(C::t('home_docomment')->fetch_all_by_doid($doid) as $value) { require_once libfile('function/url2html'); $value['message'] = url2html($value['message']);

这种做法的特点是在储存微博时不做任何相关处理,而从数据库提取微博后,则用正则表达式来找出该微博里的所有图片,然后将这些图片地址都替换成能直接显示成图片的html图片元素。

2。一键视频

汉山上的一键贴不光支持贴图,还支持贴音频和多个视频网站的视频。接下来我们讨论一下如何支持贴YouTube视频。常见的YouTube视频地址有多种形式,举例而言:
https://www.youtube.com/embed/MD5bFCDfySc (视频地址)
https://www.youtube.com/v/MD5bFCDfySc (视频地址)
https://www.youtube.com/watch?v=MD5bFCDfySc (视频网页地址)
https://m.youtube.com/watch?v=MD5bFCDfySc (视频网页地址)
https://youtu.be/MD5bFCDfySc (视频网页地址)
有些对应于视频本身,还有些则对应于视频所在的网页。 我们要支持所有这些形式的地址。将前面介绍过的函数 url2html 增补如下: function url2html ($message) { $message = preg_replace("/(https?:\/\/\S+?.(?:jpe?g|png|gif))/ie", "url2html_img('\\1')", $message); $message = preg_replace("/https?:\/\/(?:www.)?youtube.com\/embed\/([a-zA-Z0-9\_\-]+)/ie", "url2html_youtube('\\1')", $message); $message = preg_replace("/https?:\/\/(?:www.)?youtube.com\/v\/([a-zA-Z0-9\_\-]+)/ie", "url2html_youtube('\\1')", $message); $message = preg_replace("/https?:\/\/(?:[a-zA-Z0-9\-]+\.)?youtube.com\/watch\?v=([a-zA-Z0-9\_\-]+)/ie", "url2html_youtube('\\1')", $message); $message = preg_replace("/https?:\/\/youtu.be\/([a-zA-Z0-9\_\-]+)/ie", "url2html_youtube('\\1')", $message); return $message; } function url2html_youtube($vid) { return "<iframe src='https://www.youtube.com/embed/$vid?rel=0' frameborder='0' allowfullscreen style='width: 400px; height: 300px; vertical-align: top;'></iframe>"; }


这种做法将每个微博里的Youtube地址都显示成了一个iframe,网民可以点击后在那里观看。缺点一是如果将视频按Youtube推荐的尺寸560*315来显示的话,它在微博里占地过大,影响阅读其它内容。而如果缩小过多的话,看起来不方便,会不得不再点击全屏播放。 二是这样做微博页上网页越多,网页的负担越大,显示和反应的速度越慢。 每个iframe里的内容都要向YouTube网站发数个请求来获取,即使是不看视频的网友也会受其影响。

3。按需嵌入

Amit Agarwal (链接)介绍了 Google+ 网站 (链接)是如何来避免网页速度变慢的。它们在网页上显示视频的并不是iframe,而只是视频的一张缩影图片。只当用户点击图片后,那张图片才被一个当时生成的iframe所取代。

他还介绍了具体的实现方法。下面的处理借鉴了他的方法。我们将上面提到的 url2html_youtube 函数修改如下:
function url2html_youtube($vid) { return '<div class="youtube-player"> <div style="display: inline; position: relative; cursor: pointer;" onclick="loadYouTubeVideo(this, \''.$vid.'\');"> <img class="youtube-thumb" src="//i.ytimg.com/vi/'.$vid.'/0.jpg" /> <div class="play-button"></div></div></div>'; } 在用户点击了显示的YouTube视频图片后,loadYouTubeVideo函数将它用一个 iframe 来替换,它定义在 /template/default/common/footer.htm 里: function loadYouTubeVideo(pd, vid) { var iframe = document.createElement("iframe"); iframe.setAttribute("src", "//www.youtube.com/embed/" + vid + "?autoplay=1&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); pd.parentNode.replaceChild(iframe, pd); } 相关风格的定义如下: div.youtube-player { display: inline-block; width: 400px; height: 300px; position: relative; vertical-align: top; background-color: Black; margin-bottom: 20px; } img.youtube-thumb { width: 400px; height: 300px; position: absolute; } div.play-button { height: 128px; width: 128px; position:absolute; margin-left: 136px; margin-top: 86px; background: url({IMGDIR}/player_play.png) no-repeat; } #youtube-iframe { width: 100%; height: 100%; position: absolute; }


这种办法对网页的速度会有改善,但还是没解决视频占地和周边微博内容尺寸不匹配的问题。

4。弹窗播放

现在我们来介绍第三种办法。保留第二种办法里显示视频图片的优点,但将它缩小到能和微博里其它内容高度匹配,当用户点击它时将视频在一个新窗口里按YouTube推荐的560*315的尺寸播放。这个窗口可以用我们前文介绍过的Discuz软件提供的弹窗功能(链接)来实现。
我们先要对前面提到过的函数 url2html_youtube 做个小的改动: function url2html_youtube($vid) { return '<div class="youtube-player"> <div style="display: inline; position: relative; cursor: pointer;" onclick="loadYouTubeVideo(\''.$vid.'\');"> <img class="youtube-thumb" src="//i.ytimg.com/vi/'.$vid.'/0.jpg" /> <div class="play-button"></div></div></div>'; } 重点要改的是函数 loadYouTubeVideo 里的内容: function loadYouTubeVideo(vid) { var html = "<div class='f_c' style='width: 400px; height: 320px;'>"; html += "<h3 class='flb' style='background-color: #a4cf50; padding: 0px 8px 0px;'><span><a href='javascript:;' class='flbc' onclick='hideWindow(\"youtube\");'></a></span></h3>"; html += "<iframe src='//www.youtube.com/embed/"+vid+"?autoplay=1&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=1' frameborder=0 allowfullscreen allowtransparency width=400 height=300></iframe></div>"; showWindow('youtube', html, 'html', 0); } 再要修改下前面提到过的有关风格(还缩小一个图): div.youtube-player { display: inline-block; width: 200px; height: 150px; position: relative; vertical-align: top;margin-bottom: 20px; } img.youtube-thumb { width: 200px; height: 150px; position: absolute; } div.play-button { position:absolute; width: 48px; height: 48px; margin-left: 152px; margin-top: 103px; background: url({IMGDIR}/player_play.png) no-repeat; }



本文主要讨论了如何在微博里添加对图片和油管视频的一键贴的支持。这样的做法不难类似的推广到其它形式的视频音频和其它格式的文件如PDF,以及论坛博文文章及其评论里。

发表评论 评论 (49 个评论)

回复 天香公主 2017-1-16 09:51 AM
carry0987: 天香,X3.3出來了!看看吧:
https://git.oschina.net/ComsenzDiscuz/DiscuzX
有趣,我还以为已经停止开发了。等周末我装装看
回复 carry0987 2017-1-16 05:05 AM
天香公主: 不需要。这里用的版本好象比carry用的要旧,这里文件列表里没显示上传时间,所以也不需要改了。
天香,X3.3出來了!看看吧:
https://git.oschina.net/ComsenzDiscuz/DiscuzX
回复 天香公主 2017-1-12 12:27 AM
忆江南: 那这里相应的文件是不是也要改?
不需要。这里用的版本好象比carry用的要旧,这里文件列表里没显示上传时间,所以也不需要改了。
回复 忆江南 2017-1-12 12:13 AM
天香公主: 谢谢帮助,现在应该改好了 http://www.bian-wang.com/discuz/data/userupload/10005/txgz_file_uploader.zip。改了文件 func.php
那这里相应的文件是不是也要改?
回复 carry0987 2017-1-10 10:46 PM
天香公主: 谢谢帮助,现在应该改好了 http://www.bian-wang.com/discuz/data/userupload/10005/txgz_file_uploader.zip。改了文件 func.php
好的~今天回家試試
回复 天香公主 2017-1-10 09:16 PM
carry0987: 天香,文件上傳插件的日期排序出問題啦~~它把年分全部替換成2017了...
谢谢帮助,现在应该改好了 http://www.bian-wang.com/discuz/data/userupload/10005/txgz_file_uploader.zip。改了文件 func.php
回复 carry0987 2017-1-7 01:38 AM
天香,文件上傳插件的日期排序出問題啦~~它把年分全部替換成2017了...
回复 sesemule 2016-12-18 07:14 PM
是啊,这样倒也挺好;能打开pdf的浏览器,点击链接后也就直接在新窗口里显示pdf了,不能打开pdf的浏览器,点击链接后也就下载然后用专用工具打开pdf了。挺好挺好。
回复 天香公主 2016-12-15 06:27 PM
sesemule: 最近用到了一键贴pdf文件的功能,发现一个问题:如果浏览器不能识别pdf文件(PC上大部分浏览器都是可以正常识别的,但是我手机上的大部分浏览器都不识别),那么 ...
同意你的想法。查到些相关的讨论
http://www.pinlady.net/PluginDetect/PDFReader/
http://www.falexandrou.com/2014/03/25/display-pdf-in-page-without-a-javascript-plugin/
http://stackoverflow.com/questions/31793186/detecting-support-for-application-pdf-in-microsoft-edge
似乎不容易找到一个对所有浏览器都适用的探测浏览器是否能显示PDF文件的办法。如果PDF文件并不是你网站的重点的话,就显示链接算了。在我写的文件function_url2html.php里有个函数url2html_pdf,可以将它改为

function url2html_pdf($url, $minorArea) {
    return $url;
}
回复 sesemule 2016-12-14 09:28 AM
最近用到了一键贴pdf文件的功能,发现一个问题:如果浏览器不能识别pdf文件(PC上大部分浏览器都是可以正常识别的,但是我手机上的大部分浏览器都不识别),那么页面就会一直加载直到最终提示错误,而且没有供用户下载后查看的按钮。

能否改成,如果不能识别就直接为下载链接?
回复 夙興夜寐罔徒勞 2016-6-19 11:09 PM
嗯嗯,脸书已经不用了OGP了呢,其它的网站还是在用的。今天又探究了下土豆,优酷和腾讯的视频封面。

1、土豆页面里的script有个pageConfig 数组,其中更有lpic变量,单个视频的封面就是变量所显示的地址:http://www.tudou.com/programs/view/fMKPyKlGka0 这里的lpic地址是http://g2.tdimg.com/cb2a11defe7e6e79b989dff7786e919d/p_2.jpg
然后如果稍微改动下,
http://g2.tdimg.com/cb2a11defe7e6e79b989dff7786e919d/o0_2.jpg
http://g2.tdimg.com/cb2a11defe7e6e79b989dff7786e919d/o5_2.jpg
http://g2.tdimg.com/cb2a11defe7e6e79b989dff7786e919d/o10_2.jpg
得到的是原图,间隔截图的编号差距是5;如果字母变成 b,则是中等尺寸
http://g2.tdimg.com/cb2a11defe7e6e79b989dff7786e919d/b10_2.jpg

然后是在土豆专辑当中的视频,lpic仍旧是有的,但代表是专辑图片,比如
http://www.tudou.com/albumplay/MWyS7a-RNYg/HnGt5ZmaZI0.html
的转接封面是
http://u3.tdimg.com/6/209/166/108579724874850111038902175646435608726.jpg
在页面找不到单集封面图,后来尝试分享出去,发现还是有封面图的,很小而且源的出处是在优酷:
http://r3.ykimg.com/0543040855B5BE9F6A0A42472FB41A0B

然后优酷和腾讯的比较难弄。。。比土豆还要不规律
回复 天香公主 2016-6-19 11:45 AM
夙興夜寐罔徒勞: 公主,能不能帮忙写一个解析函数
一键贴里头对搜狐是用窗口,而不是用静态图片。我昨天看了下发现,静态图片地址和网页地址也有有关联的:比如下面这个搜 ...
搜狐和脸书的作法是一样的,参见 http://stackoverflow.com/questions/12014196/get-facebook-meta-tags-with-php 。查了查这叫 Open Graph protocol (http://ogp.me/) 。以我文 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1486 中的那些视频网页地址试了试,  youtube,dailymotion,vimeo,凤凰,爱奇艺都提供这样的信息。
回复 夙興夜寐罔徒勞 2016-6-17 03:30 PM
公主,能不能帮忙写一个解析函数
一键贴里头对搜狐是用窗口,而不是用静态图片。我昨天看了下发现,静态图片地址和网页地址也有有关联的:比如下面这个搜狐网址:
http://my.tv.sohu.com/us/294324758/84175699.shtml
网页html查看page source的话,可以找到视频的封面图片
http://225.img.pp.sohu.com.cn/p225/2016/6/17/13/9/6_1563c530d7eg104SysCutcloud_84175699_7_3b.jpg
回复 夙興夜寐罔徒勞 2016-6-15 08:28 PM
天香公主: 没听说过,没这方面的经验
   我也刚开始看的说,希望可行,到时候再补充下这一键贴功能
回复 天香公主 2016-6-15 07:50 PM
夙興夜寐罔徒勞: (⊙v⊙)嗯 现在可以了~

另外再问下子,公主对freenas熟不熟悉?目前有个目标:将freenas上的视频文件共享到主网站(一个资源分享网站,目前是将视频上传到主流视 ...
没听说过,没这方面的经验
回复 夙興夜寐罔徒勞 2016-6-15 07:27 PM
天香公主: 查了下当时我的测试站用了自己的风格模板,所以窗口风格是加在template/我的风格模板/common/extend_common.css里。如果你用默认风格模板的话,可以加在template ...
(⊙v⊙)嗯 现在可以了~

另外再问下子,公主对freenas熟不熟悉?目前有个目标:将freenas上的视频文件共享到主网站(一个资源分享网站,目前是将视频上传到主流视频网站,但是缺陷是都有二次转码,清晰度会降低许多)上,论坛的会员可以通过类似这个一键贴的方式,来观看存放在freenas上的视频。不知是否可行

之前有尝试搭过一个小的视频网站:在windows server上用nginx搭建网站,然后在页面嵌入jwplayer代码,直接调用windows server上的文件。
回复 天香公主 2016-6-15 06:10 PM
夙興夜寐罔徒勞: 公主,窗口风格应该加在什么地方。。。试了common文件夹里头的module.css, common.css,css_space.css都木有效果
查了下当时我的测试站用了自己的风格模板,所以窗口风格是加在template/我的风格模板/common/extend_common.css里。如果你用默认风格模板的话,可以加在template/default/common/common.css里。记得更新下缓存。
回复 夙興夜寐罔徒勞 2016-6-15 05:51 PM
公主,窗口风格应该加在什么地方。。。试了common文件夹里头的module.css, common.css,css_space.css都木有效果
回复 天香公主 2016-5-13 09:32 AM
sesemule: 还想麻烦下,代码中并没有爱奇艺,我站有个女生在爱奇艺追剧,还买了会员……请问如何添加爱奇艺的地址?视频形式如下:
http://www.iqiyi.com/v_19rrlw026s.htm ...
我现在应该算是支持爱奇艺了 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1486,但不能直接贴视频网页的地址,要在视频网页里找到视频的地址,贴视频的地址,见我的图示  http://www.bian-wang.com/discuz/data/attachment/album/201605/12/232216cg9mlpurlr9rlujo.jpg
回复 sesemule 2016-5-10 10:02 AM
天香公主: 把这之前的那句
<audio controls>
改成类似下面的
<audio controls style=&quot;width: 150px;&quot;>
嗯,这个问题解决了。很棒!

其实一开始我觉得贴MP3地址播放音乐的功能好像没什么用处,因为用户很难找到后缀是.mp3的音频地址,大家听歌都是用QQ音乐或者百度音乐盒。后来我想到,我可以自己搜集一些独特的音频上传到FTP空间(比如我们有一个相声社团,就可以搜集相声段子),用一个专门的账号发布这些音频,利用转发功能让它们流动起来……嗯,相当完美。
123下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-3-25 03:36 PM , Processed in 0.066669 second(s), 19 queries.

返回顶部