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 video 元素的 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，讓開發人員可以指定更多關於影片檔案的資訊。影片的其他資訊會顯示在使用者裝置的通知中心 (以及播放/暫停控制項)。

這個範例同時包含 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 屬性，或回復為網頁的標題。

Analytics (分析)

amp-video 支援開箱即用的分析功能。詳情請參閱 影片分析。

Styling (樣式設定)

Click-to-Play overlay (點擊播放重疊)

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