준호씨의 블로그
유튜브 썸네일 추출기를 만들었습니다. 본문
유튜브 썸네일 추출기는 아래 링크를 클릭하면 사용해 볼 수 있습니다.
http://labs.junho85.pe.kr/creator/
요렇게 생긴 사이트가 나타납니다. 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에 있습니다.
'개발이야기' 카테고리의 다른 글
정원사들 시즌5 시작. 일일커밋 (0) | 2020.03.04 |
---|---|
IntelliJ - 자동줄바꿈. Soft Wrap (4) | 2020.02.09 |
20200202 palindrome day. 오늘은 회문의 날 (0) | 2020.02.02 |
apache httpd - dyld: Library not loaded: 문제 (0) | 2020.01.29 |
javascript - moment 사용예제. YYYYMMDD 포멧. 어제 날짜 구하기. 일주일전 날짜 구하기 (0) | 2019.11.23 |