amp-video

1.0 0.1

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

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-video-1.0.css">

用法

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>

在有效的 AMP 文件之外獨立使用

Bento 可讓您在非 AMP 頁面中使用 AMP 組件，而無需完全提交到有效的 AMP。您可以採用這些組件，並將它們放置在不支援 AMP 的框架和 CMS 的實作中。請參閱我們的指南 在非 AMP 頁面中使用 AMP 組件 以瞭解詳情。

互動性和 API 用法

Bento 組件透過其 API 具有高度互動性。在 Bento 獨立使用中，元素的 API 取代了 AMP 動作和事件以及 amp-bind。

可透過在您的文件中包含以下腳本標籤來存取 amp-video 組件 API

await customElements.whenDefined('amp-video');
const videoHandle = await video.getApi();

動作

amp-video API 可讓您執行以下動作

play()

播放影片。

videoHandle.play();

pause()

暫停影片。

videoHandle.pause();

mute()

將影片靜音。

videoHandle.mute();

unmute()

取消影片靜音。

videoHandle.unmute();

requestFullscreen()

在可能的情況下，將影片展開為全螢幕。

videoHandle.requestFullscreen();

屬性

它還公開了以下唯讀屬性

currentTime (數字)

目前的播放時間（以秒為單位）。

console.log(videoHandle.currentTime);

duration (數字)

影片的長度（以秒為單位），在其已知時（例如，不是直播）。

console.log(videoHandle.duration);

autoplay (布林值)

影片是否自動播放。

console.log(videoHandle.autoplay);

controls (布林值)

影片是否顯示控制項。

console.log(videoHandle.controls);

loop (布林值)

影片是否循環播放。

console.log(videoHandle.loop);

屬性

src

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

poster

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

或者，您可以呈現點擊播放覆蓋層。

autoplay

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

controls

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

controlsList

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

loop

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

crossorigin

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

disableremoteplayback

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

muted (已淘汰)

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

noaudio

將影片註解為沒有音訊。這具有以下效果

• 設定 autoplay 時，將不會繪製等化器圖示。

• 包含此影片的 <amp-story> 將不會繪製不必要的靜音按鈕。

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 屬性，或回退到頁面的標題。

數據分析

amp-video 支援開箱即用的數據分析。請參閱 影片數據分析 以瞭解更多資訊。

樣式設定

點擊播放覆蓋層

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