jQuery로 만든 간단한 동영상 갤러리

필요한 일이 생겨 뚝딱뚝딱 검색해가며 만들었는데, 꽤 재밌는 거 같아 기록 차원에서 블로그에 남깁니다.

'jQuery를 이용한 간단한 동영상 갤러리'라 이름 붙였는데요, 크게 별거 없는 간단한 페이지입니다.

구조는 이렇습니다. 페이지 상단에 고정된 플레이어 영역이 있고, 하단에는 각 동영상의 썸네일이 있어요. 썸네일을 클릭하면 상단의 플레이어 영역에서 유튜브 동영상이 재생되는 식입니다.

HTML 마크업

상단 플레이어는 유튜브에서 제공하는 기본 iframe을 넣었습니다. 하단 썸네일은 보기 편하게 dl과 그 자식태그들에 클래스를 먹여 썼습니다. 사실 마크업 자체는 편하게 해도 됩니다. 어차피 jQuery에서 불러와야 하니까, 태그나 클래스명만 잘 구분해주면 되겠네요. dl.movs는 1, 2, 3번이 각각 내용만 다르고 모두 같은 태그로 이루어져 있습니다.

<div id="player">
 <div id="player_screen"><div class="top_img">맨 처음 로딩되면 보이는 이미지</div><iframe src="http://www.youtube.com/embed/hrCfpDLFU5Q?rel=0" width="400" height="225" frameborder="0" allowfullscreen="true"></iframe></div>
    <dl id="player_text">
     <dt><a href="#">맨 처음 로딩되는 동영상의 제목</a></dt>
        <dd><a href="#">맨 처음 로딩되는 동영상의 설명</a></dd>
    </dl>
</div><!-- player -->

<div id="list">

    <dl class="movs">
     <dd class="thumb"><a href="#"><img src="http://lorempixel.com/80/60/people" alt=""><span class="time">01:55</span></a><em></em></dd>
        <dt><a href="#">동영상의 제목 1</a></dt>
        <dd class="desc"><a href="#">동영상의 설명 1</a></dd>
        <dd class="url"><iframe src="http://www.youtube.com/embed/tvGa_uhaEEQ?rel=0"></iframe></dd>
    </dl>

    <dl class="movs">
     <dd class="thumb"><a href="#"><img src="http://lorempixel.com/80/60/people" alt=""><span class="time">01:55</span></a><em></em></dd>
        <dt><a href="#">동영상의 제목 2</a></dt>
        <dd class="desc"><a href="#">동영상의 설명 2</a></dd>
        <dd class="url"><iframe src="http://www.youtube.com/embed/0P7ZAVYkUt8?rel=0"></iframe></dd>
    </dl>

    <dl class="movs">
     <dd class="thumb"><a href="#"><img src="http://lorempixel.com/80/60/people" alt=""><span class="time">01:55</span></a><em></em></dd>
        <dt><a href="#">동영상의 제목 3</a></dt>
        <dd class="desc"><a href="#">동영상의 설명 3</a></dd>
        <dd class="url"><iframe src="http://www.youtube.com/embed/WaTrPpkGTDs?rel=0"></iframe></dd>
    </dl>

</div>

#player_screen 영역에서 iframe과 dl 태그들을 이용해 동영상, 제목, 설명 등을 보여줍니다.

#list 영역에서 각 dl 을 이용해 썸네일과 제목, 설명 등을 보여줍니다. 동영상의 URL이 들어갈 iframe도 넣어놓고 숨겨둡니다. 막 ajax로 불러오고 xml로 불러오고 하면 좋겠지만, '간단한' 페이지이므로 그냥 마크업에 넣어줍니다.

CSS 스타일시트

#player { width:400px;}
#player_screen { position:relative; width:400px; height:225px; }
#player_screen iframe { position:relative; width:400px; height:225px; }
#player_screen .top_img { width:400px; height:225px; position:absolute; top:0px; left:0px; cursoor:pointer; background:#e5e5e5;}
#player_screen .top_img + iframe { display:none }
#player_text dt, #player_text dd { margin:0; padding:0;}

dl.movs { width:100px; float:left; border:solid 1px #ccc;}
dl.movs + dl.movs { margin-left:10px;}
dl.movs dt, dl.movs dd { margin:0; padding:0;}
dl.movs dd.desc, dl.movs dd.url { display:none; }

CSS는 대략 모양만 나올 정도로 넣었습니다. 상단에 플레이어를 크게 보여주고, 하단에 썸네일들을 죽 나열해서 보여주죠. 취향대로 꾸며보세요.

jQuery 스크립트

이 페이지의 가장 중요한 부분입니다. 크게 두 부분으로 나누어져 있는데요,

1. 플레이어 영역에서 미리 로드된 최초 동영상 재생

2. 썸네일 영역을 클릭시 플레이어 영역에서 해당 영상을 재생

첫번째 부분부터 살펴볼까요.

$('#player_screen .top_img').on('click', function(e) { // 플레이어 영역을 덮은 이미지를 클릭하면
  e.preventDefault(); // 일단 a태그에 걸린 링크는 무시하고
  var $item_top = $("#player_screen").find("iframe").attr("src"); // 플레이어 영역에 넣은 iframe의 주소를 찾아서 $item_top 로 간직하고 있다가
  $('#player_screen .top_img').fadeOut("slow"); // 플레이어 영역을 덮은 이미지를 천천히 페이드처리하고
  $('#player_screen iframe').show().attr("src",$item_top + "&autoplay=1"); // 플레이어 영역의 iframe 주소에 autoplay 코드를 추가해서 변경
 });

이렇게 해두면, 커버 이미지를 클릭했을 때 자동으로 플레이어 영역에 넣어두었던 최초 영상이 재생됩니다.

그럼 두번째 항목을 볼까요. 두번째 항목은 크게 불러오는 부분, 뿌려주는 부분으로 되어있습니다.

$('#list .movs a').on('click', function(e) { // 썸네일 영역의 a 링크들을 클릭하면
  e.preventDefault(); // 일단 a태그에 걸린 링크는 무시하고
  var $itemx = $(this).parents("dl.movs") // 클릭된 a 의 부모요소 중 dl.movs라는 요소를 찾아 $itemx 로 지정합니다.
  var $itemx_tit = $itemx.find("dt").html(); // 간직한 $itemx 요소에 dt를 찾아 그 안의 내용을 $itemx_tit으로 지정합니다. 
  var $itemx_desc = $itemx.find("dd.desc").html(); // 간직한 $itemx 요소에서 dd.desc를 찾아 그 안의 내용을 $itemx_desc로 지정합니다.
  var $itemx_url = $itemx.find("dd.url iframe").attr("src"); // 간직한 $itemx 요소에서 dd.url 안에 있는 iframe을 찾아, 그 주소를 $itemx_url 로 지정합니다.
  var $sc_top = $(document).scrollTop(); // 사실 없어도 되지만, 플레이어 영역이 스크롤되어 감춰졌을 때 제대로 보여주기 위해서 지정합니다. 문서가 얼마나 스크롤되었는지 지정합니다.
  var $player_top = $('#player').offset().top // 문서 내에서 플레이어 영역의 세로 위치가 어디 쯤에 위치하는지를 지정합니다.

   //console.log($itemx); // 콘솔을 켜두면 각 값이 제대로 표시되는지 쉽게 알 수 있겠죠? IE에서는 콘솔이 안먹으니까 테스트용으로만 씁시다.
   //console.log($itemx_tit);
   //console.log($itemx_desc);
   //console.log($itemx_url); 

  $('#player_screen .top_img').hide(); // 커버 이미지를 감춥니다. 
  $('#player_screen iframe').attr("src",$itemx_url + "&autoplay=1"); // 플레이어 영역의 iframe에 아까 지정해두었던 iframe주소와 자동실행 코드를 넣어줍니다. 동영상이 재생됩니다.
  $('#player_screen iframe').show(); // 만약 iframe이 감춰져 있었다면, 이 코드를 통해 보여지게 됩니다.
  $('#player_text dt').html( $itemx_tit ); // 플레이어 영역의 제목 부분에 썸네일에 있던 제목을 그대로 가져와 넣어줍니다.
  $('#player_text dd').html( $itemx_desc ); // 플레이어 영역의 설명 부분에 썸네일에 있던 설명을 그대로 가져와 넣어줍니다.
  if ( $player_top < $sc_top) { // 만약 플레이어 영역의 높이값보다 페이지를 더 아래로 스크롤했을 경우,
    $('html, body').animate({ scrollTop: $player_top }, "slow"); // 현재 보고있는 페이지를 플레이어 영역이 다 보일 때까지 스크롤 합니다.
    }
  else { return false } // 만약 플레이어 영역의 높이값이 화면에 보인다면, 그냥 관둡니다.
 });

이렇게 해서 페이지가 완성되었습니다.

포인트는 클릭한 부분을 중심으로 부모나 자식 요소를 찾고, 그것을 var를 통해 변수로 지정한 뒤, 다시 불러와서 뿌려주는 것에 있습니다. autoplay=1 같은 자동실행 코드를 더해서 뿌려주는 것도 중요하죠.

정말 기초적인 방법으로 만든 동영상 갤러리이지만, 간단한 페이지 만들 때엔 쓸만할 겁니다. 분명 더 간단하고 쉽게 하는 방법도 분명히 있을터라 살짝 부끄럽네요. 뭐, 하나씩 배워가는 거니까요~

아래는 실제 작동되는 예제입니다.