준호씨의 블로그

유튜브 썸네일 추출기를 만들었습니다. 본문

개발이야기

유튜브 썸네일 추출기를 만들었습니다.

준호씨 2020. 2. 9. 19:13
반응형

유튜브 썸네일 추출기는 아래 링크를 클릭하면 사용해 볼 수 있습니다.

http://labs.junho85.pe.kr/creator/

 

Youtube Thumbnail Extractor

Youtube Thumbnail Extractor

labs.junho85.pe.kr

 

요렇게 생긴 사이트가 나타납니다. Video URL 에 youtube URL 을 넣고 Extract 버튼을 누르거나 엔터키를 누르면 해당 영상의 썸네일들이 나타납니다.

사실 뭔가 대단한 건 아니고 url 에서 video id 를 추출해서 thumbnail url 을 만들어서 표시해준 것입니다. 이런 사이트들이 이미 있긴 하지만 제 입맛에는 맞지 않아서 따로 만들어 본 것입니다.

추출 원리

유튜브에 영상을 등록하면 유튜브에서 썸네일 이미지들을 생성해서 URL 로 접근 할 수 있도록 만들어 줍니다.

URL 들은 다음과 같습니다. 글을 쓰다가 몇가지 더 알게 되었는데 아마 더 많이 있을거 같네요.

* Maximum Resolution
 * https://img.youtube.com/vi/<videoId>/maxresdefault.jpg
 * https://img.youtube.com/vi_webp/${videoId}/maxresdefault.webp
* Original
  * https://img.youtube.com/vi/${videoId}/original.jpg
* 첫번째는 풀사이즈. 나머지는 작은 사이즈.
  * https://img.youtube.com/vi/<videoId>/0.jpg
  * https://img.youtube.com/vi/<videoId>/1.jpg
  * https://img.youtube.com/vi/<videoId>/2.jpg
  * https://img.youtube.com/vi/<videoId>/3.jpg
* 기본
  * https://img.youtube.com/vi/<videoId>/default.jpg
* HQ (High Quality)
  * https://img.youtube.com/vi/<videoId>/hqdefault.jpg
* MQ (Medium Quality)
  * https://img.youtube.com/vi/<videoId>/mqdefault.jpg
* SD (Standard Definition)
  * https://img.youtube.com/vi/<videoId>/sddefault.jpg

단순히 영상의 썸네일 확인 용도라면 첫번째의 Maximum Resolution 만 알아도 될 것입니다. 다른것들은 별로 쓸 일이 없을거 같습니다.

썸네일 이미지를 단순히 보여주기만 하는 것은 아니고, 이미지의 URL 도 알려주고, 클릭하면 원본이미지를 새 창에 띄워줍니다. 썸네일을 따로 저장하거나 URL 을 다른곳에서 활용할 때 사용할 수 있습니다.

 

혹시나 사용자가 엉뚱한 영상의 주소를 복사 했을 수 있기 때문에 재생기도 넣었습니다.

이런저런 기능들을 더 넣어 보고 싶긴 하지만 일단 요기까지~

아참. 코드는 https://github.com/junho85/labs/tree/master/creator에 있습니다.

반응형
Comments