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 圖片的網址，作為影片的美工圖案。如果沒有 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 規則。