Valchan

"What we know is a drop.. What we don't know is an ocean." - Isaac Newton

28 de novembro de 2020 • 1 min de leitura

YouTube thumbnail

Como obter a miniatura do vídeo do Youtube?

Eu estava vendo essa pergunta feita no StackOverflow de como obter a miniatura usado PHP, mas eu não fiz com PHP e sim com Javascript, e utilizando também a função de getWordBetweenTwoCharacters() que eu havia criado anteriormente.

Segue abaixo o código:

const url = 'https://www.youtube.com/watch?v=FnazXYWlyr8'

const getWordBetweenTwoCharacters = (text, start, end) => text.split(start).pop().split(end)[0].trim()

const getThumbnailUrlFromYoutubeUrl = (thumbnailUrl) => {
  if(!thumbnailUrl) return ''
  const videoId = getWordBetweenTwoCharacters(thumbnailUrl, '?v=', '&')
  return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
}

console.log(getThumbnailUrlFromYoutubeUrl(url)) 
// "https://img.youtube.com/vi/FnazXYWlyr8/hqdefault.jpg"

É possível adicionar mais melhorias nesta função, como por exemplo, ser passado o tamanho que a pessoa quer a imagem.

Obs.: Algumas miniaturas podem ou não existir, provavelmente dependendo da qualidade do vídeo!

Segue a tabela abaixo de variações:

Largura (Width) Altura (Height) URL
120 90 https://i.ytimg.com/vi/{videoId}/1.jpg
120 90 https://i.ytimg.com/vi/{videoId}/2.jpg
120 90 https://i.ytimg.com/vi/{videoId}/3.jpg
120 90 https://i.ytimg.com/vi/{videoId}/default.jpg
320 180 https://i.ytimg.com/vi/{videoId}/mq1.jpg
320 180 https://i.ytimg.com/vi/{videoId}/mq2.jpg
320 180 https://i.ytimg.com/vi/{videoId}/mq3.jpg
320 180 https://i.ytimg.com/vi/{videoId}/mqdefault.jpg
480 360 https://i.ytimg.com/vi/{videoId}/0.jpg
480 360 https://i.ytimg.com/vi/{videoId}/hq1.jpg
480 360 https://i.ytimg.com/vi/{videoId}/hq2.jpg
480 360 https://i.ytimg.com/vi/{videoId}/hq3.jpg
480 360 https://i.ytimg.com/vi/{videoId}/hqdefault.jpg
640 480 https://i.ytimg.com/vi/{videoId}/sd1.jpg
640 480 https://i.ytimg.com/vi/{videoId}/sd2.jpg
640 480 https://i.ytimg.com/vi/{videoId}/sd3.jpg
640 480 https://i.ytimg.com/vi/{videoId}/sddefault.jpg
1280 720 https://i.ytimg.com/vi/{videoId}/hq720.jpg
1920 1080 https://i.ytimg.com/vi/{videoId}/maxresdefault.jpg

Comentários