注册 登录
北美生活网~和你在一起 返回首页

东风的个人空间 http://www.beimeilife.com/?7 [收藏] [复制] [分享] [RSS]

日志

Discuz学习:应用Google API 添加Youtube频道/播放列表

热度 1已有 193 次阅读2015-12-18 13:53 |个人分类:共享|系统分类:日记随笔

受天香兄之邀,写点自己搭建网站的走的弯弯绕绕,因为本身从来没有搞过编程工作, 一路跌跌撞撞,门外汉一个,希望大家不要见笑, 决非班门弄斧哈, 只是想这写出来,或有自己考虑不到的错误隐藏,集思广益对大家都好~~

一直羡慕贝壳亲(backchina.com)和超级苹果论坛(powerapple.com)的视频专题,和文学城一样都是使用的视频插件, 本想自己买一个试验下, 后来费劲注册支付宝未国,而且发现此类插件都需要人工采集,辛苦得很。无意中看到IBM有一段使用google API开发Youtube播放列表的文章, 进而搜寻一下,果然不负所望,就是Youmax:http://www.codehandling.com/2013/03/youmax-20-complete-youtube-channel-on.html, 完全免费, 也是一种插件, 但是与前面提到的插入视频的理念完全不同,

前者的好处是很容易将视频分门别类,但需要一个个将视频地址输入采集, 后者,是直接将Youtube的视频发布者的播放频道或/以及播放列表使用 jQuery 直接嵌入网站网页,只要有发布者更新( 如电视剧目),就随时更新, 大概基于的思想就是电视剧无数,但是剧场有数,呵呵,个有千秋。

演示页面:http://demos.codehandling.com/youmax2/youmax.html,与discuz论坛的融合可以参见嵌入在北美生活网中的: http://www.beimeilife.com/portal.php?mod=topic&topicid=20

现在我把自己做的具体步骤列出:

一:准备:

1:下载: (Youmax2.0免费的, 作者又丰富了频道等效果开发了Youmax9.0,但是不免费)https://github.com/codehandling/youmax

三个主要文件:youmax.css,jquery-1.9.1.min.js, youmax.js

为了了解其原理,请认真阅读:http://www.codehandling.com/2013/03/youmax-20-complete-youtube-channel-on.html

2:注册并生成youtube api key: https://developers.google.com/youtube/v3/?hl=en, 记下自己的api_key, 以及client_id.

3: 上传文件:将第一步中的下载文件以及目录分别上传相应目录:(如果更换,应该在模式文件中作相应调整:css 文件应该放在视频播放的单页文件一起:

我们在根目录作一个子目录:videos, 将css,jquerry,js三个主要目录及其文件上传导video中。其中的css文件是将来修好视频播放样式的,可以根据需要做相应修改。

4: 生成单页文件.php(可以是专题/频道/门户/等任何可以DIY的就可以), 目的就是使用嵌入discuz的DIY功能,嵌入自定义html网页,( 可惜我在这里没有权限使用嵌入代码, 不然下面的代码会好浏览些?)

举例生成一个专题页面,引用单页视频文件:youtube_tvs4.php, (可生成任何一个目录,比如根目录:videos. 将其生成后上传在其中)

<?php 
define('CURSCRIPT', 'archy');//body的一个class标识 
require './../source/class/class_core.php';//引入系统核心文件 
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象 
$discuz->init(); 
loadcache('diytemplatename');//DIY要载入缓存 
$navtitle = '电视剧场四'; 
$metakeywords = '电视剧,Youtube,电视剧场四'; 
$metadescription = '电视剧场四'; 
include template('diy:forum/youtube_tvs4');//调用单页模版文件 


5:形成单页文件的youtube视频样式--即单页模版文件,生成html文件(youtube_tvs4.html),上传到:/teplate/default/forum/ :

比如:电视剧场四---大剧独播剧场---生成youmax_tvs4.html: (如下我隐藏了自己申请的api_key等)

 <!--<script src="./jquery.min.js"></script>-->
 <script src="   
   jq('#youmax').youmax({
    apiKey:'*******************t_g',
    youTubeChannelURL:jq('#youTubeChannelUrl').val(),
    
    youTubePlaylistURL:jq('#youTubePlaylistUrl').val(),
    youmaxDefaultTab:"PLAYLISTS",
    youmaxColumns:3,
    showVideoInLightbox:false,
    maxResults:18,
    threeColumnContainerWidth:"950px",
    
   });

   //youTubeChannelURL=jq('#youTubeChannelUrl').val();
   //youTubePlaylistURL=jq('#youTubePlaylistUrl').val();
  }

 </script>

  <style>

     body {
       font-family: Calibri;
       font-size: 14px;
  text-align:center;
     }
  
  /*#youmax{width:100% !important;}
  #youmax-video-list-div{background-color:rgb(53,53,53) !important;}
  #youmax-tabs{background-color:rgb(53,53,53) !important;}
  #youmax-header{background-color:black !important;}
  .youmax-video-list-title{color:white !important;}
  .youmax-video-list-views{color:green !important;}*/
   
 </style>
<div id="pt" class="bm cl">        
<div class="z">
<a href="/videos/youtueb_tvs4.php">Youtube电视剧<em>»</em>                
<a href="/videos/youtube_tvs4.php">电视剧场四---大剧独播剧场<em>»</em>                     
</div> </div> <div id="ct" class="wp cl">        
<div class="mn bm cl">                
<div class="bm_c">          
<div id="youmax"></div>
<br/><br/>
 <script type="text/javascript">
  jq('#youmax').youmax({
   apiKey:'*************_g',
   clientId:"***********.apps.googleusercontent.com",
   youTubeChannelURL:"https://www.youtube.com/channel/UCNORTw_uosRNGgdEjwdHvuw",
   youTubePlaylistURL:"https://www.youtube.com/user/chinadramas/playlists",
   featuredVideo:"https://www.youtube.com/watch?v=ZLJ2toSst9c&feature=player_profilepage",
   youmaxDefaultTab:"PLAYLISTS",
   youmaxColumns:3,
   showVideoInLightbox:false,
   maxResults:18,
   threeColumnContainerWidth:"950px",    
  }); 
 </script>                                       
</div>        
</div>
</div>

6:那么专题页如何嵌入上面的单页文件(其实直接连接也可以看,但是无法发挥discuz的diy功能:

diy---添加模块---静态页面---html代码:

<iframe src="/videos/youtube_tvs4.php"
frameborder="0\" allowtransparency="true" scrolling="yes" width=960 height=1880"></iframe>

基本就这样了。仓促,难免错误,望指正。





高兴

感动

鲜花

漂亮

酷毙

握手

同情
1

搞笑

刚表态过的朋友 (1 人)

发表评论 评论 (3 个评论)

回复 东风 2015-12-18 13:53
原文:http://www.bian-wang.com/discuz/home.php?mod=space&uid=10703&do=blog&id=1151
回复 安茗 2015-12-19 11:20
辛苦了,问候〜〜
回复 东风 2015-12-22 15:28
安茗: 辛苦了,问候〜〜
   有这话,再辛苦都值得~~节日愉快~~

facelist doodle 涂鸦板

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

返回顶部