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 標籤可在影片中啟用字幕。如果 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 (number)

目前的播放時間（秒）。

console.log(videoHandle.currentTime);

duration (number)

影片的持續時間（秒），在已知的情況下（例如，不是直播）。

console.log(videoHandle.duration);

autoplay (boolean)

影片是否自動播放。

console.log(videoHandle.autoplay);

controls (boolean)

影片是否顯示控制項。

console.log(videoHandle.controls);

loop (boolean)

影片是否循環播放。

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。如果沒有 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 動作，您可以輕鬆實作點擊播放。