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 (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 (deprecated) (已停用靜音)

muted 屬性已停用且不再具有任何效果。autoplay 屬性會自動控制靜音行為。

noaudio (無音訊)

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

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

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

rotate-to-fullscreen (旋轉至全螢幕)

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

此屬性可以根據 媒體查詢 進行設定。

通用屬性

此元素包含擴充至 AMP 元件的 通用屬性。

Media Session API 屬性 (媒體工作階段 API 屬性)

amp-video 元件實作了 Media Session API (媒體工作階段 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 功能。例如，您可以顯示使用者可以點擊的自訂播放圖示，以及包含影片標題、不同尺寸的海報影像等等。由於 amp-video 元件支援標準 play AMP 動作，因此您可以輕鬆實作點擊播放。