segunda-feira, 29 de agosto de 2016

Thumbnail vídeo Youtube

Objetivo
Exibir thumbnail de vídeos do Youtube.
Tecnologia aplicada

Estrutura de arquivos
index.php => Arquivo principal que receberá o link do vídeo e recuperará o thumbnail.

Explicando
O Youtube possui um subdomínio de hospedagem dos thumbnails em variadas resoluções. Para recuperar o thumbnail é necessário passar o ID do vídeo na url. Esse ID é o parâmetro "v" passado na URL do vídeo. Por exemplo:

O link de vídeo abaixo possui ID "n0qZCqyI_HM":

Para recuperar o thumbnail desse vídeo basta utilizarmos o seguinte endereço:
http://img.youtube.com/vi/"ID DO VÍDEO"/"quadro.jpg"

Onde quadro pode ser substituído pelo numero do quadro que queira capturar do vídeo, como por exemplo:
http://img.youtube.com/vi/n0qZCqyI_HM/1.jpg

Ou quadro pode ser substituído pelo quadro padrão conforme opções abaixo:

default.jpg => para miniatura de quadro padrão em resolução padrão.
hqdefault.jpg => para miniatura de quadro padrão em alta resolução.
mqdefault.jpg => para miniatura de quadro padrão em resolução média.
sddefault.jpg => para miniatura de quadro padrão em resolução padrão.
maxresdefault.jpg => para miniatura de quadro padrão em resolução máxima disponível.

Já que entendemos o esquema de recuperação de thumbnail, vamos ao desenvolvimento.

Desenvolvimento

<?php
//url do vídeo no youtube
$link = 'https://www.youtube.com/watch?v=n0qZCqyI_HM';
$url = parse_url($link); //prepara o link separando os componentes presentes na url como o schema, host, porta, usuário, senha, diretório, parâmetro e fragmento
parse_str($url['query'], $dados); // converte os parâmetros em um vetor onde o nome do parâmetro assume o nome da posição no vetor.
?>
<a href="<?=$link?>">
    <img src="http://img.youtube.com/vi/<?=$dados['v']?>/hqdefault.jpg" />
</a>


Na linha 3 recebemos o link do vídeo.
Em seguida convertemos a string em componentes de url, capturando cada informação do link passado e colocando em um vetor na linha 6.
Com o vetor preparado, recuperamos o ID do vídeo que é o parâmetro "v" da url e inserimos no caminho da imagem.

Este foi nosso post de hoje.
Obrigado pela visita.
Espero que tenha ajudado.

Até a próxima.



Nenhum comentário: