Google-amp-media

提供：Dev Guides
移動先:案内、検索

Google AMP-メディア

この章では、jwplayerやYoutubeなどのサードパーティパートナーからのビデオとオーディオを表示する方法について説明します。 次のことについて詳しく学びましょう-

  • Google AMP-JwPlayer
  • Google AMP-YouTube
  • Google AMP-オーディオ

Google AMP-JwPlayer

jwplayerを使用してページにビデオを表示する場合、ampには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>

ampページのjwplayerの動作例を以下に示します-

例

<!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-metadatal">
      <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タグ

amp-jwplayerには、3つの重要な属性があります

  • データプレーヤーID
  • データメディアID
  • データプレイリストID

プレーヤー、メディア、プレイリストのIDを取得するには、ここから実行できるjwplayerにログインする必要があります-https://dashboard.jwplayer.com//players/list?pageLength=s&page=1&view=list&dateRange= 7d＆dateRangeEnd = 2019-02-22＆dateRangeStart = 2019-02-15 [https://dashboard.jwplayer.com//players]

プレーヤーIDはjwplayerプレーヤーセクションで利用できます。 メディアIDは* jwplayerコンテンツセクション*で、プレイリストIDは* jwplayerプレイリストセクション*で利用できます。

Jwplayerは、各属性のamp-jwplayerで使用する必要がある8桁の英数字IDを提供します。

Google AMP-Youtube

アンプページにYoutubeビデオを表示する場合、ampには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-metadatal">
      <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 finddevguides</h3>
      <amp-youtube
         width = "480"
         height = "270"
         layout = "responsive"
         autoplay = "true"
         data-videoid = "fWZ6-p7mGK0">
      </amp-youtube>
   </body>
</html>

出力

Amp youtube tag

YouTubeビデオを表示するには、以下に示すようにamp-youtubeにvideoidを与える必要があります- 

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

data-videoidを取得する方法は？

たとえばhttps://www.youtube.com/watch?v=fWZ6-p7mGK0などのYouTubeのURLを検討してください。 ハイライトされた部分は、amp-youtubeで使用されるIDです。

属性 autoplay をtrueとして使用しました。 ビデオはブラウザでサポートされているように自動再生され、ミュートモードで再生されます。 ミュートを解除するには、動画をタップする必要があります。 ビデオは、表示されなくなると一時停止し、表示されると一時停止状態から再開します。 ユーザーがビデオを一時停止して表示/非表示になった場合、ビデオは一時停止状態のままになります。 同じことがミュート/ミュート解除にも適用されます。

Google Amp-オーディオ

Ampには、html5オーディオタグに代わるオーディオを再生するタグがあります。 ampページでオーディオを再生するには、amp-audioを使用できます。

amp-audioを使用するには、次のスクリプトを追加する必要があります- 

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

アンプオーディオタグ

<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は、オーディオファイルへのhttp要求であるsrc属性を使用します。 標準のhtml5オーディオの代わりにamp-audioを使用している理由は、ampがhttp要求を必要とする要素に対して遅延ロードの概念を導入しているためです。

優先度に基づいてリクエストのロードを開始します。ビューポートに到達する直前または直前にロードされます。

あなたのページでアンプオーディオを使用する実用的な例はここに示されています-

例

<!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-metadatal">
      <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などの属性が指定されているamp-audioのタグを以下に示します。 また、ブラウザでamp-audioがサポートされていない場合のフォールバックとして機能する* fallback属性*を含むdivを追加しました。 

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

Amp再生タグ

ダウンロードをクリックすると、使用するメディアファイルをダウンロードできます。 ダウンロードを無効にするには、次の例に示すように、属性- 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-metadatal">
      <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>

出力

Amp audio tag Ex 

*controlsList = "nodownload"* を使用すると、右側の3つの縦のドットが消えます。
*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-metadatal">
      <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>

出力

Amp Preload

属性 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>
「https://www.finddevguides.com/index.php?title=Google-amp-media&oldid=6559」から取得
Powered by MediaWiki