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 中的 Video 規範中概述。

controls

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

controlsList

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

dock

需要 amp-video-docking 元件。如果存在此屬性且影片正在手動播放，則當使用者滾動超出影片元件的可視區域時，影片將被「最小化」並固定到角落或元素。

loop

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

crossorigin

如果 track 資源與文件位於不同的來源，則為必要。

disableremoteplayback

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

muted (已棄用)

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

noaudio

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

在故事中，此屬性會有效地將影片靜音。

volume

設定影片的目前音量，值必須在 [0, 1] 範圍內。預設值為 1。

使用 volume 屬性時，如果故事中的其他影片沒有 crossorigin 屬性（如果來源是 CORS），則它們可能無法正確播放。

rotate-to-fullscreen

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

通用屬性

此元素包含擴展到 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

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

artist

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

album

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

title

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

cache

指示 Google 影片快取應透過新增 cache="google" 來儲存和提供影片。影片快取會定期擷取和儲存影片內容，降低影片的服務成本，並產生具有不同品質設定的轉碼，以適應網路狀況調整位元速率。

分析

amp-video 支援開箱即用的分析。請參閱影片分析以獲取更多資訊。

樣式

點擊播放覆蓋層

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

驗證

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