:::: 개발 ::::/::: JSCRIPT :::

youtupe api javascript 2015-05-12

nayha 2015. 5. 12. 17:18
반응형




<!DOCTYPE html>

<html xml:lang="ko" lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<title>KOMVO</title>


<link rel="stylesheet" type="text/css" href="../css/base.css"/>    

<link rel="stylesheet" type="text/css" href="../css/common.css"/>


<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="../js/komvo-ui.js"></script>


<!-- Link Swiper's CSS -->

<link rel="stylesheet" href="../css/swiper.css">


<!-- Demo styles -->

<style>

.swiper-container {

width: 100%;

height: 100%;

}

.swiper-container-horizontal>.swiper-pagination { position:relative; top:0; right:0%; height:24px; border-bottom:1px solid #e2e3e4; overflow:hidden; }

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {margin:0 24px;}

.swiper-pagination-clickable .swiper-pagination-bullet { background:#ff0000; height:24px; margin:0 24px; }

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { height:12px; margin-top:8px; background:url(../images/mnu_sub.png) no-repeat; background-size:500px auto; border-radius:0; }

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(1) {width:64px; background-position:0 0;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(2) {width:49px; background-position:-111px 0;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(3) {width:98px; background-position:-208px 0;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(4) {width:60px; background-position:-354px 0;}


.swiper-pagination-bullet-active {opacity:100%;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {background-position:0 -15px;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {background-position:-111px -15px;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {background-position:-208px -15px;}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active {background-position:-354px -15px;}



.swiper-wrapper {height:100%; min-height:480px; }

.swiper-slide {

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}


.subContent .cds_h2 { height:50px; overflow:hidden; }

.subContent .sector {background:url(../images/mnu_sub.png); background-size:500px 28px; }

.subContent .sector.smnu01 {background-position:0 0;}

.subContent .sector.smnu02 {background-position:112px 0;}

.subContent .sector.smnu03 {background-position:208px 0;}


.loadingOn {

background : url(../images/komvo_Loding1.gif) 0 0 no-repeat;

-webkit-background-size : 28px 12px;

background-size : 28px 12px;

}

.loadingOff {

background : url(../images/komvo_Loding2.gif) 0 0 no-repeat;

-webkit-background-size : 28px 12px;

background-size : 28px 12px;

}

.hr_ld {margin:20px 0; overflow:hidden;}

.loadingOn,

.loadingOff {text-align:center;display:block; height:12px; background-position:50% 50%; }


.loadingOn em,

.loadingOff em {border:0; position:absolute; top:-10000px; left:-10000px; height:1px;font-size:1px; line-height:1px;}

</style>

<script>


var result_json="";

var renult_nextPage="";

var result_nextValue="";

var isComplete = false;

var lank =0;


$(document).ready(function(){

fn_load("0");  

});


fn_load = function(type){

// 마지막 데이타 체크

if ( type != "0" && renult_nextPage == undefined ){


alert('더이상 데이타가 없습니다.'); 

return;

}


$.ajax({

url: "https://www.googleapis.com/youtube/v3/playlistItems?"

+ [

"part=snippet",

"playlistId=PLSJkNdQGrU_z6TaXcxywg11bUKe6JFL71",

"order=date",

"maxResults=10",

"pageToken="+renult_nextPage,

"key=AIzaSyApAIIzHW07iHsS1z_ON4fLC_IAHy4sp64"

].join("&"),

dataType: "jsonp",

success: function(data){


result_json = data.items;

renult_nextPage = data.nextPageToken;


if(result_json.length >0)

{



for(i=0;i<result_json.length;i++){

//alert(result_json[i].id.videoId);

//alert(result_json[i].snippet.channelTitle);

lank = lank + 1;


var result_Value="<div class='wrp_cds'><div class='cds'>"; 

result_Value= result_Value + "<div class='cds_addition'>";

result_Value= result_Value + "<object type='text/html' data='http://www.youtube.com/embed/" + result_json[i].snippet.resourceId.videoId +"' allowFullScreen></object>";

result_Value= result_Value + "</div>";

result_Value= result_Value + "</div></div>";

$("#now").append(result_Value);


/*

var result_Value="<div class='wrp_cds'><div class='cds'>"; 

result_Value= result_Value + "<div class='cds_addition'><img data-src='"+result_json[i].snippet.thumbnails.high.url+"' width='100%' alt='' src='"+result_json[i].snippet.thumbnails.high.url+"'>"+lank+"</div>";

result_Value= result_Value + "<div class='cds_explain'><h2 class='cds_h2'><a href='play_jw.html?v=" + result_json[i].id.videoId + "&title=" + escape(result_json[i].snippet.title) + "'  >" + result_json[i].snippet.title +"</a></h2></div>";

result_Value= result_Value + "<div class='cds_bundle'><a href='play_jw.html?v=" + result_json[i].id.videoId + "&title=" + escape(result_json[i].snippet.title) + "' class='cds_send _MM_SHARE'  ><span class='imh im_send'>33,636,054 views</span></a></div><a href='#' class='cds_a' ><div><span class='blind'>"+result_json[i].snippet.publishedAt +"</span></div></a>";

result_Value= result_Value + "</div></div>";

*/

//console.log(result_Value);

//alert(result_Value);


//$("#now").append(result_Value);


}

}

}

});

}

// 하단 스크롤 데이타 append

$(document).ready(function (event){


$(window).scroll(function(){


var scrollHeight = $(window).scrollTop() + $(window).height();


var documentHeight = $(document).height();


//스크롤이 맨아래로 갔는지 아닌지 확인하는 if문


if(scrollHeight == documentHeight){

fn_load("2")

}


});


});


</script>

<!-- Swiper JS -->

<script src="../js/swiper.min.js"></script>


<!-- Initialize Swiper -->

<script>

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

spaceBetween: 30,

});

</script>

</head>

<body>



<nav class="snb">

<div class="container">

<ul class="menuList">

<li><a href="#none">Home</a></li>

<li><a href="#none">TV Program</a></li>

<li><a href="#none" class="on">Entertainment</a></li>

<li><a href="#none">Fan’s Video</a></li>

<li><a href="#none">Favorite</a></li>

</ul>

<div class="userCtrlWrap">

<div class="setting">

<a href="#">Settings</a>

</div>

</div>

</div>

</nav>

<div id="wrap">

<header>

<div class="top">

<a href="#" class="btnMenu jsNavSnb">목록</a>

<!-- SubPage -->

<h1><a href="#"><span class="tit">TV Program</span></a></h1>

<a href="#" class="orderP">Popular</a>

<!-- 

<a href="#" class="orderP on">Popular</a>

<a href="#" class="orderL">Latest</a>

<a href="#" class="orderL on">Latest</a>

-->


<!-- MainPage Only  -->

<!-- <h1><a href="#"><span class="logo">KOMVO  logo</span></a></h1> -->


<a href="#" onclick="javascript:openLayerPop1(0);return false;" class="btnSearch">Search</a>


<div class="laypopup inPop search">

<!-- Search -->

<div class="search_form" id="form_base">

<label>Search</label>

<div class="fit-textinput-unit">

<input type="text" placeholder="Search Artists or Videos" >

<div class="fit-clear-btn"><a href="#">Delete</a></div>

</div>

</div>

<!--// Search -->

</div>


</div>

</header>


<div id="content" class="subContent">


<div id="contWrap">


<!-- flicking view start -->


<div class="swiper-container">


<div class="swiper-pagination"></div>


<div class="swiper-wrapper">

<div class="swiper-slide">


<div id="now" class="wrap id_now"></div>


</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

<div class="swiper-slide">Slide 4</div>

</div>


</div>


<!-- flicking view End -->

</div>

</div>


<div id="footer">

<a href="#" class="spr btnTop">Top</a>

</div>


</div>


</body>

</html>

반응형
저작자표시 비영리 변경금지

':::: 개발 :::: > ::: JSCRIPT :::' 카테고리의 다른 글

여러건 체크박스 동시 체크  (0) 2015.09.11
체크박스 체크 유무 파악후 변수 만들기  (0) 2015.09.10
무한스크롤 / 하단 이벤트 잡아서 한개씩 붙이기..  (2) 2015.07.01
Flick 테스트  (2) 2015.05.26
Node.js 전역변수.. __filename __dirname 전역객체  (0) 2015.03.31
node.js express 설치 할때 애러 ( UNABLE_TO_VERIFY_LEAF_SIGNATURE)  (2) 2015.03.23
유튜브 api 활용 목록 가져오기  (0) 2014.12.18
크롬 에서 animate scrollTop 오류  (0) 2014.11.24

':::: 개발 ::::/::: JSCRIPT :::'의 다른글

  • 현재글youtupe api javascript 2015-05-12

관련글

티스토리툴바