重要事項：本文件不適用於您目前選擇的格式 電子郵件！

amp-youtube

實驗性

Bento

說明

顯示 YouTube 影片。

必要指令碼

AMP Bento (獨立)

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

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

支援的版面配置

fill (填滿) fixed (固定) fixed-height (固定高度) flex-item (彈性項目) nodisplay (不顯示) responsive (回應式)

用法

顯示 YouTube 影片。

使用回應式版面配置時，範例中的寬度和高度應能為 16:9 長寬比的影片產生正確的版面配置

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270"
></amp-youtube>

<amp-youtube
  id="myLiveChannel"
  data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
  width="358"
  height="204"
  layout="responsive"
>
  <amp-img
    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
    placeholder
    layout="fill"
  />
</amp-youtube>

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

Bento AMP 讓您可以在非 AMP 頁面中使用 AMP 元件，而無需完全承諾使用有效的 AMP。您可以取得這些元件，並將它們放置在不支援 AMP 的架構和 CMS 實作中。請參閱我們的指南，以瞭解詳情：在非 AMP 頁面中使用 AMP 元件。

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-youtube-1.0.css">
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-1.0.js"></script>
</head>
<body>
  <amp-youtube
    style="aspect-ratio: 16/9"
    id="my-youtube-video"
    data-videoid="mGENRKrdoGY"
  ></amp-youtube>
  <script>
    (async () => {
      const video = document.querySelector('#my-youtube-video');
      await customElements.whenDefined('amp-youtube');
      const videoHandle = await video.getApi();

      // programatically call playback actions
      videoHandle.play();
      videoHandle.pause();
      videoHandle.requestFullscreen();
      videoHandle.mute();
      videoHandle.unmute();

      // get video state
      console.log({
        autoplay: videoHandle.autoplay,
        controls: videoHandle.controls,
        duration: videoHandle.duration,
        currentTime: videoHandle.currentTime,
        loop: videoHandle.loop,
      })
    })();
  </script>
</body>

互動性和 API 用法

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

可以透過在文件中加入以下指令碼標記來存取 amp-youtube 元件 API

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

動作

amp-youtube API 允許您執行以下動作

`play() (播放)`

播放影片。

videoHandle.play();

`pause() (暫停)`

暫停影片。

videoHandle.pause();

`mute() (靜音)`

將影片靜音。

videoHandle.mute();

`unmute() (取消靜音)`

取消影片靜音。

videoHandle.unmute();

`requestFullscreen() (請求全螢幕)`

盡可能將影片展開為全螢幕。

videoHandle.requestFullscreen();

屬性

它也公開了以下唯讀屬性

`currentTime` (`number`) (`currentTime` (`數字`))

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

console.log(videoHandle.currentTime);

`duration` (`number`) (`duration` (`數字`))

影片的持續時間，以秒為單位，在已知的情況下 (例如，不是直播)。

console.log(videoHandle.duration);

`autoplay` (`boolean`) (`autoplay` (`布林值`))

影片是否自動播放。

console.log(videoHandle.autoplay);

`controls` (`boolean`) (`controls` (`布林值`))

影片是否顯示控制項。

console.log(videoHandle.controls);

`loop` (`boolean`) (`loop` (`布林值`))

影片是否循環播放。

console.log(videoHandle.loop);

從 0.1 版本遷移

實驗性的 1.0 版本 amp-youtube 不會自動將 data-param-controls 轉換為 controls。而是直接將 controls 作為屬性。

屬性

autoplay (自動播放)

如果此屬性存在，且瀏覽器支援自動播放

影片會在自動播放開始前自動靜音
當影片捲動到視窗外時，影片會暫停
當影片捲動到視窗內時，影片會恢復播放
當使用者點擊影片時，影片會取消靜音
如果使用者與影片互動過 (例如，靜音/取消靜音、暫停/恢復等)，且影片捲動到視窗內或外，影片的狀態仍會保持使用者離開時的狀態。例如，如果使用者暫停影片，然後將影片捲動到視窗外並返回影片，則影片仍會處於暫停狀態。

loop (循環播放)

如果此屬性存在，影片或播放清單將在結束後再次播放 (從頭開始)。

data-videoid (影片 ID)

YouTube 影片 ID，可在每個 YouTube 影片頁面 URL 中找到。

例如，在此 URL 中：https://www.youtube.com/watch?v=Z1q71gFeRqM，Z1q71gFeRqM 是影片 ID。

data-live-channelid (直播頻道 ID)

提供穩定直播網址的 Youtube 頻道 ID。例如，在此 URL 中：https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q，UCB8Kb4pxYzsDsHxzBfnid4Q 是頻道 ID。您可以提供 data-live-channelid 而不是 data-videoid 屬性，以嵌入直播的穩定網址，而不是影片。頻道沒有預設預留位置。您可以為影片提供預留位置，如上面的範例 2 所示。

data-param-* (資料參數-*)

所有 data-param-* 屬性 (data-param-autoplay 和 data-param-loop 除外) 都會作為查詢參數新增至 YouTube iframe src。這可用於將自訂值傳遞給 YouTube 外掛程式，例如是否顯示控制項。

金鑰和值將會進行 URI 編碼。金鑰將會使用駝峰式命名

controls (控制項)

請參閱 YouTube 嵌入式播放器參數，以取得 YouTube 的更多參數選項。

請使用 autoplay 屬性而不是 data-param-autoplay，並使用 loop 屬性而不是 data-param-loop，因為自動播放和循環播放行為都由 AMP 內部處理，而不是由 Youtube 播放器處理。

credentials (optional) (憑證 (選填))

定義 credentials 選項，如 Fetch API 中所指定。

支援的值：omit、include
預設值：include

如果您想在隱私權加強模式中使用 YouTube 播放器，請傳遞值 omit。

通常，YouTube 會在播放器載入時設定 Cookie。在隱私權加強模式下，Cookie 會在使用者點擊播放器後設定。

title (optional) (標題 (選填))

為元件定義 title 屬性，以傳播到基礎的 <iframe> 元素。預設值為 "YouTube 影片"。

通用屬性

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

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您的所有問題？也許其他人也有同樣的感覺：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

前往 GitHub

amp-youtube 1.0 0.1

說明