Google AMP - wideo

Amp-video we wzmacniaczu to standardowe wideo HTML5 używane do odtwarzania bezpośredniego osadzania wideo. W tym rozdziale wyjaśnimy, jak pracować i używać funkcji amp-video.

Aby pracować z amp-video musimy dodać następujący skrypt -

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

Amp-video ma atrybut src, który zawiera zasób wideo do załadowania, który jest leniwie ładowany przez wzmacniacz w czasie wykonywania. Poza tym wszystkie funkcje są prawie takie same, jak w przypadku tagu wideo HTML5.

Poniżej znajdują się węzły, które mają zostać dodane do wideo wzmacniacza -

Source - Za pomocą tego znacznika można dodawać różne pliki multimedialne do odtwarzania.
Track - Ten tag umożliwia włączenie napisów do filmu.
Placeholder - Ten zastępczy tag będzie wyświetlać zawartość przed rozpoczęciem odtwarzania wideo.
Fallback - Ten tag będzie wywoływany, gdy przeglądarka nie obsługuje wideo HTML5.

Format tagu amp-video

Tutaj pokazano format tagu amp-video -

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

Zrozummy amp-video na przykładzie roboczym, jak pokazano poniżej -

Przykład

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

Wynik

Wynik powyższego kodu jest pokazany poniżej -

Atrybuty dostępne dla amp-video

Atrybuty dostępne dla wzmacniacza wideo są wymienione w tabeli tutaj -

Sr.No	Atrybuty i opis
1	src Jeśli nie ma węzła <source>, należy określić src i jest to adres https: // url.
2	poster Plakat przyjmuje adres URL img, który jest wyświetlany przed rozpoczęciem odtwarzania wideo.
3	autoplay Posiadanie tego atrybutu na amp-video spowoduje automatyczne odtworzenie wideo, jeśli przeglądarka obsługuje. Film będzie odtwarzany w trybie wyciszonym, a użytkownik będzie musiał dotknąć wideo, aby wyłączyć wyciszenie.
4	controls Posiadanie tego atrybutu we wzmacniaczu wideo spowoduje wyświetlenie elementów sterujących w wideo podobnie do wideo HTML5.
5	loop Jeśli ten atrybut jest obecny w amp-video, wideo zostanie odtworzone ponownie po zakończeniu.
6	crossorigin Ten atrybut pojawia się, jeśli zasoby do odtwarzania wideo znajdują się w innym źródle.
7	rotate-to-fullscreen Jeśli wideo jest widoczne, wyświetla się na pełnym ekranie po obróceniu urządzenia przez użytkownika do trybu poziomego

Autoodtwarzanie wideo AMP

Możemy użyć atrybutu autoplay na wypadek, gdybyśmy musieli automatycznie odtworzyć wideo. Ta funkcja będzie działać zgodnie z obsługą przeglądarki. Pamiętaj, że podczas autoodtwarzania film będzie wyciszony. Gdy użytkownik dotknie filmu, wyciszenie zostanie wyłączone.

Pozwól nam skorzystać z funkcji autoodtwarzania za pomocą działającego przykładu, jak podano poniżej -

Przykład

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

Możesz aktywować elementy sterujące wideo, dodając atrybut controls, jak pokazano w poniższym kodzie -

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