Trabalhando com amp-youtube

Blog fellyph cintra - cropped trabalhando com amp youtube
Curso AMP #06 - Tipos de Componentes e amp-youtube

No post anterior como utilizar o nosso primeiro componente o amp-img neste post vamos entender um pouco mais sobre componentes AMP e como utiliza-los. Primeiramente existem três tipos de componentes:

  • Built-in são os componentes base da biblioteca como amp-img e amp-pixel.
  • Extended componentes que precisa de um script extra para executar geralmente atendem a problemas mais específicos amp-twitter, amp-youtube, amp-analytics.
  • Experimental Componentes que estão em fase de teste

Assim como web components todos os componentes AMP precisam de javascript para serem executados, com a diferença que alguns estão presente em seu core como amp-img e outros precisam de um script extra. Essa técnica a reduzir o tamanho de sua aplicação porque carregamos somente os componentes que necessitamos.

Navegando pelo repositório de componentes

Para saber qual componentes devemos utilizar a documentação será o nosso melhor aliado acessando o endereço https://amp.dev/documentation/components/ você encontrará a lista de componentes existentes e a descrição de como eles se comportam.

aqui temos um exemplo de uma página da documentação do amp-youtube

Na documentação você irá as seguintes respostas:

  • O que o componente faz: descrição(description)
  • Como usar o componente: comportamento(behavior)
  • Como personalizar o componente: atributos(attributes)
  • Como estilizar o componente: estilização(styling)
  • O componente precisa de uma script tag extra: scripts requeridos(required script)
  • Qual layout o componente suporta: Layouts

Adicionando um componente extended

Agora que temos uma introdução sobre os componentes, utilizaremos o nosso código boilerplate adicionaremos uma componente amp-youtube:

<!DOCTYPE html> <html amp> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <meta name="description" content="Este é um Boilerplate AMP."> <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Components AMP</title> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <link rel="canonical" href="."> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> </head> <body> <h2>Components AMP</h2> <amp-youtube data-videoid="ZqQ5UXjZukY" width="480" height="270"></amp-youtube> </body> </html>
Code language: HTML, XML (xml)
exemplo amp-youtube

Atenção para dois itens o script que importamos para renderizar o nosso componente YouTube amp-youtube-0.1.js e por fim a tag amp-youtube ela será responsável exibir o nosso YouTube vídeo.

Componente amp-youtube

É um componente extended responsável por exibir vídeos no YouTube por isso além das dimensões um requisito obrigatório é o id do nosso vídeo, podemos achar no URL do vídeo que queremos compartilhar, exemplo:

https://www.youtube.com/watch?v=ZqQ5UXjZukY

A propriedade v é o id do nosso vídeo, ou seja, precisamos apenas do id ‘ZqQ5UXjZukY‘ para adicionar no nosso componente aceita uma série de parâmetros:

  • data-videoid: id do vídeo do YouTube
  • layout: tipo do layout que trabalharemos, exemplo, no código anterior o vídeo respeita as dimensões definidas no componente, mas caso adicionarmos a propriedade layout como responsive o nosso componente ira sempre se adaptar ao componente pai e a largura da tela.
  • width e height: as dimensões do nosso vídeo lembrando sempre respeitando a proporção 16:9.
  • data-live-channelid: o id da sua transmissão ao vivo, nesse caso precisamos de uma propriedade diferente para nosso componente reconhecer uma transmissão ao vivo
  • autoplay: se o atributo estiver presente e o navegador suportar o vídeo irá tocar automaticamente
  • loop: se o atributo estiver presente o vídeo irá tocar em loop
  • dock: adiciona a versão do vídeo minimizada, quando o usuário realiza o scroll do conteúdo e o vídeo sai da área visível do navegador. Para habilitar este recurso precisamos de um componente extra o amp-video-docking exemplo a seguir.

Vídeo dock

Vídeo dock foi introduzido pelo YouTube recentemente ele permite o usuário acompanhar o vídeo um pequeno popup no canto superior direito enquanto realizar o scroll no conteúdo. Ele pode ser integrado com outros componentes: amp-youtube, amp-video, amp-video-iframe, e amp-dailymotion.

Para utilizar o dock precisamos de dois passos básicos carregar o script necessário e o atributo dock no nosso vídeo. Também podemos adicionar docks customizados, mas para esse tutorial utilizaremos o dock padrão. Como podemos ver no código abaixo:

<amp-youtube data-videoid="ZqQ5UXjZukY" width="480" height="270" dock layout="responsive"></amp-youtube>
Code language: HTML, XML (xml)
Exemplo do componente dock do amp-youtube em ação

Placeholder image

Podemos adicionar uma imagem de placeholder ela irá aparece no local do vídeo enquanto ele carrega, para isso no nosso componente amp-youtube adicionaremos um componente amp-img com uma propriedade para placeholder para especificar que a imagem é um placeholder de um amp-youtube como podemos ver no código abaixo:

<amp-youtube data-videoid="ZqQ5UXjZukY" width="480" height="270" layout="responsive"> <amp-img placeholder layout="fill" width="480" height="270" src="./assets/images/cover_image.png"></amp-img> </amp-youtube>
Code language: HTML, XML (xml)

Essas são algumas das possibilidades que podemos fazer com amp-youtube se quiser saber mais sobre o componente acesso o link: https://amp.dev/documentation/components/amp-youtube/?format=websites

Esse material faz parte do curso de AMP no meu canal do YouTube para acompanhar as aulas assine o canal:

https://www.youtube.com/channel/UCPaufJocHYVHj44iwXG95PA?view_as=subscriber

Mais vídeos sobre AMP você irá encontrar aqui.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.