Google AMP - Vidéo

Amp-video in amp est une vidéo html5 standard utilisée pour lire des incorporations vidéo directes. Dans ce chapitre, voyons comment travailler et utiliser amp-video.

Pour travailler avec amp-video, nous devons ajouter le script suivant -

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

Amp-video a l'attribut src qui contient la ressource vidéo à charger, qui est chargée paresseusement par amp au moment de l'exécution. En outre, toutes les fonctionnalités sont presque les mêmes que la balise vidéo html5.

Voici les nœuds à ajouter à la vidéo amp -

  • Source - Vous pouvez ajouter différents fichiers multimédias à lire à l'aide de cette balise.

  • Track - Cette balise vous permet d'activer les sous-titres pour la vidéo.

  • Placeholder - Cette balise d'espace réservé affichera le contenu avant le début de la vidéo.

  • Fallback - Cette balise sera appelée lorsque le navigateur ne prend pas en charge la vidéo HTML5.

Format de la balise amp-video

Le format de la balise amp-video est affiché ici -

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

Laissez-nous comprendre amp-video en utilisant un exemple de travail comme indiqué ci-dessous -

Exemple

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

Production

La sortie du code donné ci-dessus est comme indiqué ci-dessous -

Attributs disponibles pour amp-video

Les attributs disponibles pour amp-video sont listés dans le tableau ici -

Sr.Non Attributs et description
1

src

Si le nœud <source> n'est pas présent, alors src doit être spécifié et il doit être https: // url.
2

poster

L'affiche prend l'url img qui s'affiche avant le début de la vidéo.
3

autoplay

Avoir cet attribut sur amp-video lira automatiquement la vidéo si le navigateur prend en charge. La vidéo sera lue en mode muet et l'utilisateur devra appuyer sur la vidéo pour la réactiver.
4

controls

Avoir cet attribut sur amp-video affichera des commandes sur la vidéo similaires à la vidéo html5.
5

loop

Si cet attribut est présent sur amp-video, la vidéo sera lue à nouveau une fois terminée.
6

crossorigin

Cet attribut entre en image si la ressource pour lire la vidéo est d'origine différente.
sept

rotate-to-fullscreen

Si la vidéo est visible, la vidéo s'affiche en plein écran une fois que l'utilisateur fait pivoter son appareil en mode paysage

Vidéo AMP en lecture automatique

Nous pouvons utiliser l'attribut de lecture automatique au cas où nous aurions besoin de lire automatiquement la vidéo. Cette fonctionnalité fonctionnera selon le support du navigateur. Notez que la vidéo sera en mode muet lors de la lecture automatique. Lorsque l'utilisateur appuie sur la vidéo, elle sera réactivée.

Laissez-nous la fonction de lecture automatique à l'aide d'un exemple de travail comme indiqué ci-dessous -

Exemple

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

Vous pouvez activer les commandes de la vidéo en ajoutant l'attribut de commandes comme indiqué dans le code suivant -

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