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.
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 tagextra: 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)
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
layoutcomoresponsiveo 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 vivoautoplay: se o atributo estiver presente e o navegador suportar o vídeo irá tocar automaticamenteloop: se o atributo estiver presente o vídeo irá tocar emloopdock: 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 oamp-video-dockingexemplo 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)
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.
Deixe um comentário