Google AMP: vídeo

Amp-video in amp es un video html5 estándar que se usa para reproducir incrustaciones de video directo. En este capítulo, entendamos cómo trabajar y usar amp-video.

Para trabajar con amp-video, debemos agregar el siguiente script:

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

Amp-video tiene el atributo src que tiene el recurso de video que se va a cargar, el cual es cargado lentamente por amp en tiempo de ejecución. Además, todas las características son casi las mismas que las de la etiqueta de video html5.

Los siguientes son los nodos que se agregarán a amp video:

Source - Puede agregar diferentes archivos multimedia para reproducir con esta etiqueta.
Track - Esta etiqueta le permite habilitar los subtítulos para el video.
Placeholder - Esta etiqueta de marcador de posición mostrará el contenido antes de que comience el video.
Fallback - Esta etiqueta se llamará cuando el navegador no admita video HTML5.

Formato de la etiqueta amp-video

El formato de la etiqueta amp-video se muestra aquí:

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

Entendamos amp-video usando un ejemplo de trabajo como se muestra a continuación:

Ejemplo

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

Salida

La salida del código dado arriba es como se muestra a continuación:

Atributos disponibles para amp-video

Los atributos disponibles para amp-video se enumeran en la tabla aquí:

No Señor	Atributos y descripción
1	src Si el nodo <source> no está presente, entonces debe especificarse src y debe ser https: // url.
2	poster El póster toma una URL de imagen que se muestra antes de que comience el video.
3	autoplay Tener este atributo en amp-video reproducirá automáticamente el video si el navegador lo admite. El video se reproducirá en modo silenciado y el usuario tendrá que tocar el video para activarlo.
4	controls Tener este atributo en amp-video mostrará controles en el video similares al video html5.
5	loop Si este atributo está presente en amp-video, el video se reproducirá nuevamente una vez terminado.
6	crossorigin Este atributo entra en escena si el recurso para reproducir video tiene un origen diferente.
7	rotate-to-fullscreen Si el video es visible, el video se muestra en pantalla completa después de que el usuario gira su dispositivo al modo horizontal.

Reproducción automática de video AMP

Podemos usar el atributo de reproducción automática en caso de que necesitemos reproducir automáticamente el video. Esta característica funcionará según la compatibilidad del navegador. Tenga en cuenta que el video estará en estado de silencio cuando se reproduzca automáticamente. Cuando el usuario toque el video, se reactivará.

Permítanos la función de reproducción automática con la ayuda de un ejemplo de trabajo como se muestra a continuación:

Ejemplo

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

Puede activar controles al video agregando el atributo de controles como se muestra en el siguiente código:

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