amp-video

1.0 0.1

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

用法

HTML5 video 標記的替代品；僅適用於直接 HTML5 影片檔案嵌入。

amp-video 元件會在執行階段決定的時間延遲載入 src 屬性指定的影片資源。您可以像控制標準 HTML5 <video> 標記一樣控制 amp-video 元件。

amp-video 元件最多可接受四種獨特的 HTML 節點類型作為子項

• source 標記：就像 HTML <video> 標記一樣，您可以新增 <source> 標記子項來指定要播放的不同來源媒體檔案。
• track 標記可在影片中啟用字幕。如果追蹤記錄託管在與文件不同的來源上，您必須將 crossorigin 屬性新增至 <amp-video> 標記。每當影片有旁白或重要的音訊資訊時，請務必為可能聽不到或關閉聲音的使用者加入字幕/標題。
• 影片開始前的預留位置
• 瀏覽器不支援 HTML5 影片時的回退：一個或零個直接子節點可以具有 fallback 屬性。如果存在，此節點及其子項會形成在使用者瀏覽器上不支援 HTML5 影片時顯示的內容。

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

屬性

src

如果沒有 <source> 子項，則為必要項目。必須是 HTTPS。

poster

在影片播放開始前要顯示的影格圖片。預設情況下，會顯示第一個影格。

或者，您可以呈現按一下播放重疊。

autoplay

如果此屬性存在，且瀏覽器支援自動播放，則影片會在可見時自動播放。元件需要符合一些條件才能播放，這些條件已在 AMP 規格中的影片中概述。

controls

此屬性與 HTML5 video 中的 controls 屬性類似。如果此屬性存在，瀏覽器會提供控制項，讓使用者可以控制影片播放。

controlsList

與 HTML5 影片元素的 controlsList 屬性相同。僅某些瀏覽器支援。

dock

需要 amp-video-docking 元件。如果此屬性存在且影片是手動播放，則當使用者捲動離開影片元件的可見區域時，影片會「最小化」並固定到角落或元素。

loop

如果存在，影片會在到達結尾時自動循環回到開頭。

crossorigin

如果 track 資源託管在與文件不同的來源上，則為必要項目。

disableremoteplayback

判斷是否允許媒體元素具有遠端播放 UI，例如 Chromecast 或 AirPlay。

muted (已淘汰)

muted 屬性已淘汰，不再有任何作用。autoplay 屬性會自動控制靜音行為。

noaudio

將影片註解為沒有音訊。這會隱藏在影片具有自動播放功能時顯示的等化器圖示。

rotate-to-fullscreen

如果影片可見，則在使用者將裝置旋轉為橫向模式後，影片會以全螢幕顯示。如需更多詳細資訊，請參閱 AMP 規格中的影片。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

Media Session API 屬性

amp-video 元件實作 Media Session API，讓開發人員可以指定更多關於影片檔案的資訊。影片的其他資訊會顯示在使用者裝置的通知中心 (以及播放/暫停控制項)。

此範例同時包含 poster 和 artwork 屬性。poster 作為影片播放前的預留位置圖片，而 artwork 是透過 MediaSession API 在通知中顯示的圖片。

<amp-video
  width="720"
  height="305"
  layout="responsive"
  src="https://yourhost.com/videos/myvideo.mp4"
  poster="https://yourhost.com/posters/poster.png"
  artwork="https://yourhost.com/artworks/artwork.png"
  title="Awesome video"
  artist="Awesome artist"
  album="Amazing album"
>
</amp-video>

artwork

指定 PNG/JPG/ICO 圖片的 URL，作為影片的美工圖案。如果沒有 artwork，Media Session API 輔助程式會使用 schema.org 定義中的 image 欄位、og:image 或網站的 favicon。

artist

指出影片檔案的作者，指定為字串。

album

指出影片取自的專輯/合輯，指定為字串。

title

指出影片的名稱/標題，指定為字串。如果未提供，Media Session API 輔助程式會使用 aria-label 屬性或回退到頁面的標題。

Analytics

amp-video 支援開箱即用的分析功能。如需更多資訊，請參閱影片分析。

樣式設定

按一下播放重疊

提供按一下播放重疊是網路上影片播放器的常見 UX 功能。例如，您可以顯示使用者可以按一下的自訂播放圖示，以及包含影片標題、不同尺寸的 poster 圖片等等。由於 amp-video 元件支援標準 play AMP 動作，您可以輕鬆實作按一下播放。

驗證

請參閱 AMP 驗證器規格中的 amp-video 規則。