Google AMP - СМИ

В этой главе мы обсудим, как отображать видео и аудио от сторонних партнеров, таких как jwplayer и Youtube. Давайте узнаем подробно о следующем -

  • Google AMP - JwPlayer

  • Google AMP - YouTube

  • Google AMP - Аудио

Google AMP - JwPlayer

Если вы хотите использовать jwplayer для отображения видео на странице, для этого в amp-jwplayer есть amp-jwplayer.

Для работы с amp-jwplayer добавьте на свою страницу следующий скрипт -

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

Тег Amp-jwplayer

<amp-jwplayer 
   data-playlist-id = "482jsTAr" 
   data-player-id = "uoIbMPm3" 
   layout = "responsive"
   width = "16" 
   height = "9">
</amp-jwplayer>

Рабочий пример jwplayer на странице amp показан ниже -

пример

<!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 Jwplayer</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-jwplayer" src =
         "https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Jwplayer</h3>
      <amp-jwplayer 
         data-playlist-id = "482jsTAr"
         data-player-id = "uoIbMPm3"
         layout = "responsive"
         width = "16"
         height = "9">
      </amp-jwplayer>
   </body>
</html>

Вывод

Для amp-jwplayer есть три важных атрибута.

  • data-player-id

  • data-media-id

  • data-playlist-id

Чтобы получить идентификаторы плеера, медиа и плейлиста, вам необходимо войти в систему в jwplayer, что можно сделать отсюда - https://dashboard.jwplayer.com/#/players

Идентификатор игрока будет доступен в разделе jwplayer player. Идентификатор медиа будет доступен вjwplayer playlist section.

Jwplayer предоставляет восьмизначный буквенно-цифровой идентификатор, который необходимо использовать в amp-jwplayer для соответствующего атрибута.

Google AMP - Youtube

Если вы хотите показывать видео Youtube на своей странице amp, у amp-youtube есть amp-youtube для встраивания видео YouTube на страницу.

Чтобы использовать amp-youtube, вам необходимо добавить на свою страницу следующий скрипт -

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

Тег AMP-YouTube

<amp-youtube 
   width = "480"
   height = "270"
   layout = "responsive"
   autoplay = "true"
   data-videoid = "fWZ6-p7mGK0">
</amp-youtube>

Давайте теперь поработаем над примером, показывающим работу amp-youtube на странице.

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Youtube</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-youtube" src =
         "https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Youtube</h3>
      <h3>Youtube Videos from Tutorialspoint</h3>
      <amp-youtube 
         width = "480"
         height = "270"
         layout = "responsive"
         autoplay = "true"
         data-videoid = "fWZ6-p7mGK0">
      </amp-youtube>
   </body>
</html>

Вывод

Чтобы показать видео на YouTube, вам необходимо указать видеоидентификатор amp-youtube, как показано ниже -

<amp-youtube 
   width = "480"
   height = "270"
   layout = "responsive"
   autoplay = "true"
   data-videoid = "fWZ6-p7mGK0">
</amp-youtube>

Как получить data-videoid?

Рассмотрим, например, любой URL-адрес Youtube - https://www.youtube.com/watch?v=fWZ6-p7mGK0. Выделенная часть - это идентификатор, который будет использоваться в вашем amp-youtube.

Мы использовали атрибут autoplayкак правда. Видео будет воспроизводиться автоматически, как это поддерживается браузером, а также видео будет воспроизводиться в беззвучном режиме. Вам нужно будет нажать на видео, чтобы включить его. Видео будет приостановлено, когда оно исчезнет из поля зрения, и возобновится из приостановленного состояния, когда дело доходит до просмотра. Если пользователь ставит видео на паузу и переходит в / из просмотра, видео останется только в состоянии паузы. То же самое применимо для отключения / включения звука.

Google Amp - Аудио

У Amp есть тег для воспроизведения звука, который является заменой тега html5 audio. Для воспроизведения звука на странице усилителя мы можем использовать amp-audio.

Для работы с amp-audio нам нужно добавить следующий скрипт -

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

Тег Amp-audio

<amp-audio 
   width = "auto"
   height = "50"
   src = "audio/test.mp3">
  <div fallback>
     <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

Следовательно, amp-audio примет атрибут src, который является http-запросом к аудиофайлу. Причина, по которой мы используем amp-audio вместо стандартного аудио html5, заключается в том, что amp использует концепцию отложенной загрузки для элементов, требующих HTTP-запроса.

Он начнет загрузку запроса в зависимости от приоритета. Он будет загружен непосредственно перед или когда он собирается достичь области просмотра.

Рабочий пример использования amp-audio на вашей странице показан здесь -

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio" 
         src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio 
         width = "auto"
         height = "50"
         src="audio/test.mp3">
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

Вывод

Здесь показан тег для amp-audio, в котором указаны такие атрибуты, как ширина, высота, src. Мы также добавили div сfallback attribute который будет действовать как запасной вариант, если браузер не поддерживает amp-audio.

<amp-audio 
   width = "auto"
   height = "50"
   src = "audio/test.mp3">
   <div fallback>
      <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

Обратите внимание, что элементы управления добавляются по умолчанию к тегу аудио и могут использоваться для воспроизведения / паузы, а также для отключения / включения звука. Вы получаете вариант загрузки для аудио тега, как показано ниже -

При нажатии на загрузку вы можете загрузить используемый медиафайл. Чтобы отключить загрузку, вы можете использовать атрибут -controlsList="nodownload" как показано в примере ниже -

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio" 
            src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
         </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio 
         width = "auto"
         height = "50"
         src = "audio/test.mp3" 
         controlsList = "nodownload">
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

Вывод

С помощью controlsList="nodownload" три вертикальные точки справа исчезнут.

Есть такие атрибуты, как preload и autoplay, если они добавлены в аудиотег, аудиофайл будет загружен при загрузке страницы и будет автоматически воспроизводиться, если браузер поддерживает это. В следующем примере показано автовоспроизведение аудио.

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset="utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio" 
         src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio 
         width = "auto"
         height = "50"
         src = "audio/test.mp3" preload autoplay>
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

Вывод

Атрибут loop, если присутствует, по завершении воспроизведение звука будет повторяться.

пример

<amp-audio 
   width = "auto"
   height = "50"
   src = "audio/test.mp3" loop>
   <div fallback>
      <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved