티스토리 뷰

프로그래밍/자바스크립트

클라이언트(사용자)쪽에서 비디오 썸네일 뽑기

쉬피드 2020. 12. 22. 15:54
728x90
반응형

일반적으로 동영상의 썸네일은 FFMpeg을 활용하여 서버단에서 처리하지만
간단하게 클라이언트쪽에서도 처리 할 수 있다.

    <html>
    <head>
    </head>
    <body>
      <input type="file" id="file" accept="video/mp4" />
      <video id="video" controls style="display:none;">
      </video>
      <canvas id="thumb_canvas"></canvas>
      <script>
      const _VIDEO = document.querySelector("#video"),
            _CANVAS = document.querySelector("#thumb_canvas"),
            _CANVAS_CTX = _CANVAS.getContext("2d");
        document.querySelector("#file").addEventListener('change', function() {
          document.querySelector("#video").setAttribute('src', URL.createObjectURL(document.querySelector("#file").files[0])); //비디오를 첨부(추가)하면 첨부된 파일을 비디오 태그에 삽입한다
        });
        _VIDEO.addEventListener('loadedmetadata', function() { //비디오 태그의 메타데이터가 들어오면
          _CANVAS.width = _VIDEO.videoWidth;
          _CANVAS.height = _VIDEO.videoHeight;
          console.log(_VIDEO.duration, _VIDEO.currentTime);
          const time = Math.random() * _VIDEO.duration; //비디오의 영상길이 중 랜덤 타임을 뽑음
          _VIDEO.currentTime = time; //해당 시간으로 이동
          setTimeout(()=>{ //바로 출력하면 비디오가 불러오기 전이라 동작이 안됨. 잠깐의 기다림 후 캔버스에 해당 이미지를 그림.
            _CANVAS_CTX.drawImage(_VIDEO, 0, 0, _VIDEO.videoWidth, _VIDEO.videoHeight);
          },50)
        });
      </script>
    </body>
    </html>

주석을 참고 하기 바란다.
이런식으로 동영상 파일 첨부시 클라이언트단에서 동영상의 특정 부분을 캡쳐하여 이미지화 할 수 있고 썸네일을 만들어서 파일 전송시 같이 보내 줄 수 있다.

728x90

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

IFrame YOUTUBE API를 활용한 custom player 개발 2편  (0) 2020.12.23
IFrame YOUTUBE API를 활용한 custom player 개발 1편  (0) 2020.12.23
innerHTML을 사용할때 주의 할 점.  (0) 2020.12.22
폼 데이터를 json 데이터로 보내고 싶을 때.  (0) 2020.12.21
WebAssembly를 활용한 Rich Text Editor 제작기 2편  (0) 2020.12.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함