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

by hfkais | 2015. 2. 2. | 9 comments

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

'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 같은 자동실행 코드를 더해서 뿌려주는 것도 중요하죠.

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

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

 

 

댓글 9개:

  1. 안녕하세요~ 구글링하다 발견했는데 혹시 홈페이지 만들때 소스 사용해도 될까여??

    답글삭제
    답글
    1. 물론이죠, 간단한 코드지만 참고하시라고 올려둔 겁니다~

      삭제
    2. 감사합니다 잘쓰겠습니다~ ^^

      삭제
  2. 안녕하세요. iframe src="" 이부분에 유튜브 주소가 아닌 나스에 저장된 비디오파일 주소로 하려고 합니다. 자바스크립트 부분을 어떻게 수정해야 할지 모르겠네요.ㅠㅠ

    답글삭제
    답글
    1. NAS에 저장된 비디오 파일이라면 iframe src="video.webm" 와 같은 식으로 넣거나 video src="video.webm" autoplay poster="posterimage.jpg" 와 같이 넣어도 볼 수 있긴 한데요, 동영상 파일의 코덱이 웹 브라우저에서 지원되는 것이어야 합니다. 가령 mp4라던가...

      삭제
  3. 안녕하세요
    소스 참고하고있는데요

    메인 비디오부분은 어떻게 넣어줘야되나요?
    소스 가져와 테스트하니까
    메인 영상작동이 오류가나서요

    좀만더 알려주시면 고맙겠습니다

    답글삭제
    답글
    1. 메인 비디오 부분은 그냥 유튜브 영상이 기본으로 박혀있고, 그 위에 이미지가 덮어 씌워져 있는 형식입니다. https://codepen.io/kidno-cs/pen/oQYjMb 여기에 커버 이미지를 주석처리한 코드가 있습니다. https 환경 때문인지 스크립트 부분이 제대로 작동하질 않네요 흐음...

      삭제
  4. 안녕하세요. 잘 봤습니다.

    괜찮으시다면 답변 좀 부탁드립니다.
    맨 아래의 동영상 링크부분에서 여러개의 동영상이 아니라 선택한 하나의 동영상에서
    해당 동영상의 재생바의 특정 시간을 클릭시 해당 썸네일과 재생시간을 링크로 표시하고 싶은데요. 감이 안잡혀서요.

    답글삭제
    답글
    1. 우선, 위 코드는 단순하게 iframe을 이용해 '플레이어 임베딩' 기능만 하기 때문에 말씀하신 것처럼 복잡한 기능을 넣으려면 복잡한 API 등을 이용해야 합니다. 특히 재생바를 클릭하거나, 해당 타임의 썸네일을 불러오는 등 유튜브 플레이어와 연계해 작동하는 기능의 경우 API를 샅샅히 살펴보셔야 할 것 같네요. 기본적으론
      https://developers.google.com/youtube/v3/getting-started?hl=ko 문서에서 기본적인 API 사용방법을 확인하시고, 구글 검색 등을 통해 방법을 찾아보시는게 좋을거 같습니다.

      삭제

- 스팸 방지를 위해 보안문자(캡차) 확인을 사용하고 있습니다.
- 스팸댓글이 너무 많이 달려 댓글 검토 기능을 쓰고 있습니다. 입력하신 댓글이 당장 화면에 나타나지 않아도, 블로그 주인장은 댓글을 보고 있으니 안심하세요. 1~3일 내에 검토가 완료되면 댓글이 게시됩니다.

덧글 페이지로 이동합니다. 스팸방지를 위해 '단어확인'을 사용하고 있습니다.