No post anterior como utilizar 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.
Na documentação você irá as seguintes respostas :
- O que o componente faz: descrição(description)
- Como usar o componente: comportamento(behavior)
- Como customizar 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 components, vamos utilizar o nosso código boilerplate vamos adicionar 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>
Atenção para dois items o script que importamos para renderizar nosso componente youtube amp-youtube-0.1.js e por fim a tag amp-youtube ela será responsável exibir 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 video, podemos achar na url do video 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 em nosso componente aceita uma série de parâmetros:
- data-videoid: id do video do youtube
- layout: tipo do layout que iremos trabalhar, exemplo, no código anterior o video respeita as dimensões definidas no componente mas caso adicionarmos a propriedade layout como responsive nosso componente ira sempre se adaptar ao componente pai e a largura da tela.
- width e height: as dimensões do nosso video 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 browser suportar o vídeo irá tocar automaticamente
- loop: se o atributo estiver presente o video 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 video sai da área visível do browser. Para habilitar este recurso precisamos de um componente extra o amp-video-docking exemplo a seguir.
Video dock
Video 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, amp-dailymotion.
Para utilizar o dock precisamos de dois passos básicos carregar o script necessário e o atributo dock em nosso vídeo. Também podemos adicionar docks customizados, mas para esse tutorial vamos utilizar 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>
Placeholder image
Podemos adicionar uma imagem de placeholder ela irá aparece no local do vídeo enquanto ele carrega, para isso em nosso componente amp-youtube vamos adicionar um componente amp-img com uma propriedade para placeholder para especificar que a image é 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>
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 em 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.
