Google-amp-video

提供：Dev Guides
2020年6月22日 (月) 19:39時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

Google AMP-ビデオ

ampのamp-videoは、直接ビデオ埋め込みを再生するために使用される標準のhtml5ビデオです。 この章では、amp-videoの使用方法と使用方法を理解しましょう。

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

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

amp-videoにはsrc属性があり、これにはロードするビデオリソースがあり、実行時にampによって遅延ロードされます。 その上、すべての機能はhtml5ビデオタグとほぼ同じです。

以下は、アンプのビデオに追加されるノードです-

  • ソース-このタグを使用して、再生するさまざまなメディアファイルを追加できます。
  • トラック-このタグを使用すると、ビデオの字幕を有効にできます。
  • プレースホルダー-このプレースホルダータグは、ビデオが開始される前にコンテンツを表示します。
  • フォールバック-このタグは、ブラウザーがHTML5ビデオをサポートしていない場合に呼び出されます。

amp-videoタグの形式

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>

以下に示すような実例を使用して、アンプビデオを理解しましょう-

例

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

出力

上記のコードの出力は以下のとおりです-

AMP-Videoタグ

amp-videoで利用可能な属性

amp-videoで利用可能な属性は、ここの表にリストされています-

Sr.No Attributes & Description
1

src

<source>ノードが存在しない場合、srcを指定する必要があり、https://urlになります。

2

poster

ポスターは、ビデオが始まる前に表示されるimg URLを取ります。

3

autoplay

amp-videoにこの属性を設定すると、ブラウザーがサポートしている場合にビデオが自動再生されます。ビデオはミュートモードで再生され、ユーザーはビデオをタップしてミュートを解除する必要があります。

4

controls

amp-videoでこの属性を使用すると、html5ビデオに似たビデオのコントロールが表示されます。

5

loop

この属性がamp-videoに存在する場合、ビデオは終了すると再び再生されます。

6

crossorigin

ビデオを再生するリソースが異なる起源にある場合、この属性が現れます。

7

rotate-to-fullscreen

ビデオが表示されている場合、ユーザーがデバイスを横向きモードにすると、ビデオはフルスクリーンで表示されます

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

AMPビデオの自動再生

次のコードに示すように、controls属性を追加することで、ビデオにコントロールをアクティブにできます- 

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