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 video 標籤相同。

以下是需要新增到 amp-video 的節點:

  • Source - 你可以使用此標籤新增不同的媒體檔案進行播放。

  • Track - 此標籤允許你為影片啟用字幕。

  • Placeholder - 此佔位符標籤會在影片開始播放前顯示內容。

  • Fallback - 當瀏覽器不支援 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>

讓我們透過下面的工作示例來了解 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-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>

輸出

上面程式碼的輸出如下所示:

AMP-Video Tag

amp-video 可用的屬性

amp-video 可用的屬性列在下面的表格中:

序號 屬性 & 描述
1

src

如果不存在 <source> 節點,則必須指定 src 屬性,並且它必須是 https:// URL。

2

poster

poster 屬性接受一個 img URL,在影片開始播放前顯示。

3

autoplay

如果 amp-video 包含此屬性,並且瀏覽器支援,則會自動播放影片。影片將以靜音模式播放,使用者需要點選影片才能取消靜音。

4

controls

如果 amp-video 包含此屬性,則會顯示類似於 HTML5 video 的影片控制元件。

5

loop

如果 amp-video 包含此屬性,影片播放結束後會再次播放。

6

crossorigin

如果影片資源位於不同的域,則此屬性會發揮作用。

7

rotate-to-fullscreen

如果影片可見,當用戶將裝置旋轉到橫向模式後,影片會全屏顯示。

自動播放 AMP 影片

如果需要自動播放影片,可以使用 autoplay 屬性。此功能將根據瀏覽器支援情況生效。請注意,自動播放時影片將處於靜音狀態。使用者點選影片後,將取消靜音。

讓我們透過下面的工作示例來了解 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 - 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>
Autoplay AMP Video

你可以透過新增 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>
廣告