웹 개발 메모장

[자바스크립트] 동영상 미리보기 구현하기 본문

옛날../자바스크립트

[자바스크립트] 동영상 미리보기 구현하기

도로롱주 2018. 11. 10. 21:59







자바스크립트로 동영상 미리보기 구현하기



마우스오버하면 동영상 미리보기를 보여주는 예제입니다.


재생 버튼 이미지와 썸네일 이미지 그리고 미리보기 gif 파일을 준비합니다.




[재생 버튼 이미지]




[썸네일 이미지]



[미리보기 이미지]




이제 이미지들을 마우스 엔터/리브 이벤트 발생마다 교체해주면 됩니다.



HTML + CSS 코드를 작성해서 썸네일 이미지를 보여주고 자바스크립트를 사용해서 이벤트를 처리합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script>
      // 마우스 진입 이벤트
      $(document).on('mouseenter', '.preview_div', function(){
        // 재생 버튼 감추기
        $(this).find('img').hide();
        // 썸네일 이미지를  gif 이미지로 변경
        $(this).css('background-image', 'url(https://t1.daumcdn.net/cfile/tistory/99D4F34B5BE6C2CE01)');
      });
      // 마우스 아웃 이벤트
      $(document).on('mouseleave', '.preview_div', function(){
        // 재생 버튼 보아기
        $(this).find('img').show();
        // gif 이미지를  썸네일 이미지로 변경
        $(this).css('background-image', 'url(https://t1.daumcdn.net/cfile/tistory/99AEF8505BE6BF582D)');
      });
    </script>
    <style type="text/css">
      .preview_div { line-height: 240px; width: 430px; height: 240px; text-align: center;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(http://cfile21.uf.tistory.com/image/99AEF8505BE6BF582D6347);}
      .preview_div > img {width: 80px; vertical-align: middle;}
    </style>
  </head>
  <body>
    <!-- 미리보기 td -->
    <div class='preview_div'>
      &nbsp;<img src='https://t1.daumcdn.net/cfile/tistory/99AADD435BE6C39504' alt="preview_img"/>&nbsp;
    </div>
  </body>
</html>
 
cs



[결과]


 preview_img 



↑ 문제가 있습니다. gif 파일이 캐시에 남아있어서 마우스 이벤트 발생할 때 마다 gif 파일을 새로 가져오지 않기 때문에 매번 처음부터 시작되지 않습니다.



요청 url에 의미없는 파라미터를 넘겨주는 것으로 해결할 수 있습니다.


1
2
3
4
5
// 변경 전
$(this).css('background-image', 'url(myfile.gif');
 
// 변경 후
$(this).css('background-image', 'url(myfile.gif?v='+Math.random()+')');
cs


gif 파일을 호출하는 URL을 위와 같이 변경해주면 됩니다.


[결과]


 preview_img 



위의 결과도 해결해야할 문제가 있습니다.


gif를 가져오는데 시간이 걸리기 때문에 깜빡임 현상이 발생합니다.


이것은 어떻게 해결해야 할까요? 자바스크립트를 이용해서 onload 이벤트를 잡을 수 있습니다.


아래는 최종 코드입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script>
      // 마우스 진입 이벤트
      $(document).on('mouseenter', '.preview_div', function(){
        // 재생 버튼 감추기
        $(this).find('img').hide();
        // 썸네일 이미지를  gif 이미지로 변경
        $(this).css('background-image', 'url(https://t1.daumcdn.net/cfile/tistory/99D4F34B5BE6C2CE01?v='+Math.random()+')');
      });
      // 마우스 아웃 이벤트
      $(document).on('mouseleave', '.preview_div', function(){
        // 재생 버튼 보아기
        $(this).find('img').show();
        // gif 이미지를  썸네일 이미지로 변경
        $(this).css('background-image', 'url(https://t1.daumcdn.net/cfile/tistory/99AEF8505BE6BF582D)');
      });
    </script>
    <style type="text/css">
      .preview_div { line-height: 240px; width: 430px; height: 240px; text-align: center;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(http://cfile21.uf.tistory.com/image/99AEF8505BE6BF582D6347);}
      .preview_div > img {width: 80px; vertical-align: middle;}
    </style>
  </head>
  <body>
    <!-- 미리보기 td -->
    <div class='preview_div'>
      &nbsp;<img src='https://t1.daumcdn.net/cfile/tistory/99AADD435BE6C39504' alt="preview_img"/>&nbsp;
    </div>
  </body>
</html>
 
cs





저작자표시

'옛날.. > 자바스크립트' 카테고리의 다른 글

[자바스크립트] 채팅 구현 코드 (프론트)  (7) 2019.11.18
[자바스크립트] First-Class Function, 함수형 프로그래밍의 최소 조건  (0) 2019.01.28
[자바스크립트] for of가 IE에서 안된다..  (0) 2018.09.03
웹브라우저에서 알림을 받아보자, HTML5 Notification  (9) 2018.08.17
[자바스크립트] Date() 기본 사용 방법  (3) 2018.05.17
공유하기 링크
'옛날../자바스크립트' Related Articles more
Comments