Google AMP - Vídeo

Amp-video in amp é um vídeo html5 padrão usado para reproduzir embutidos de vídeo direto. Neste capítulo, vamos entender como trabalhar e usar amp-video.

Para trabalhar com amp-video, precisamos adicionar o seguinte script -

<script async custom-element = "amp-video" 
   src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>

Amp-video tem o atributo src que tem o recurso de vídeo a ser carregado, que é carregado vagarosamente pelo amp em tempo de execução. Além disso, todos os recursos são quase os mesmos da tag de vídeo html5.

A seguir estão os nós que devem ser adicionados ao vídeo amp -

Source - Você pode adicionar diferentes arquivos de mídia para serem reproduzidos usando esta tag.
Track - Esta tag permite habilitar as legendas do vídeo.
Placeholder - Esta tag de espaço reservado mostrará o conteúdo antes do início do vídeo.
Fallback - Esta tag será chamada quando o navegador não for compatível com vídeo HTML5.

Formato da tag amp-video

O formato da tag amp-video é mostrado aqui -

<amp-video controls width = "640" height = "360" 
   layout = "responsive" poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

Vamos entender o amp-video usando um exemplo prático como mostrado abaixo -

Exemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href =  "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1">

      <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>

      <script async custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm" type = "video/webm" />
         <source src = "video/samplevideo.mp4" type = "video/mp4" />
         
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Resultado

A saída do código fornecido acima é mostrada abaixo -

Atributos disponíveis para amp-video

Os atributos disponíveis para amp-video estão listados na tabela aqui -

Sr. Não	Atributos e descrição
1	src Se o nó <source> não estiver presente, src deve ser especificado e deve ser https: // url.
2	poster O pôster leva uma url img que é exibida antes do vídeo começar.
3	autoplay Ter este atributo no amp-video reproduz automaticamente o vídeo se o navegador for compatível. O vídeo será reproduzido em modo sem som e o usuário terá que tocar no vídeo para reativá-lo.
4	controls Ter este atributo no amp-video mostrará controles no vídeo semelhantes ao vídeo html5.
5	loop Se este atributo estiver presente no amp-video, o vídeo será reproduzido novamente quando terminar.
6	crossorigin Este atributo entra em cena se o recurso para reproduzir o vídeo estiver em uma origem diferente.
7	rotate-to-fullscreen Se o vídeo estiver visível, ele será exibido em tela cheia depois que o usuário girar o dispositivo para o modo paisagem

Vídeo AMP de reprodução automática

Podemos usar o atributo autoplay no caso de precisarmos reproduzir o vídeo automaticamente. Este recurso funcionará de acordo com o suporte do navegador. Observe que o vídeo ficará sem som durante a reprodução automática. Quando o usuário tocar no vídeo, o som será ativado.

Deixe-nos o recurso de reprodução automática com a ajuda de um exemplo de trabalho conforme fornecido abaixo -

Exemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">

      <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1">

      <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>

      <script async custom-element = "amp-video" src = "
         https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video Autoplay</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png" autoplay>
         <source src = "video/bunny.webm" type = "video/webm" />
         <source src = "video/samplevideo.mp4" type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Você pode ativar os controles do vídeo adicionando o atributo de controles conforme mostrado no código a seguir -

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png" autoplay>
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div>
</amp-video>

↰ Previous page Next page ↱