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。如果沒有 artwork，Media Session API 協助程式會使用 schema.org 定義中的 image 欄位、og:image 或網站的 favicon。

artist

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

album

指示影片取自的專輯/收藏，指定為字串。

title

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

分析

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

樣式

點擊播放覆蓋層

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

驗證

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