YouTube Player API Reference for iframe Embeds

IFrame Player API 可讓您在網站上嵌入 YouTube 影片播放器，並使用 JavaScript 控制播放器。

您可以使用 API 的 JavaScript 函式，將影片排入播放佇列、播放、暫停或停止影片、調整播放器音量，或擷取正在播放的影片相關資訊。您也可以新增事件監聽器，在特定播放器事件 (例如播放器狀態變更) 發生時執行。

本指南說明如何使用 IFrame API。這份文件會說明 API 可傳送的不同類型事件，並說明如何撰寫事件監聽器來回應這些事件。並詳細說明您可以呼叫哪些 JavaScript 函式來控制影片播放器，以及可用來進一步自訂播放器的播放器參數。

需求條件

使用者的瀏覽器必須支援 HTML5 postMessage 功能。大多數現代瀏覽器都支援 postMessage。

嵌入式播放器的可視區域大小至少須為 200 x 200 像素。如果播放器顯示控制項，則必須足夠大，才能完整顯示控制項，且不會縮小檢視區，使其小於最小尺寸。建議 16:9 播放器的寬度至少為 480 像素，高度至少為 270 像素。

任何使用 IFrame API 的網頁都必須實作下列 JavaScript 函式：

  • onYouTubeIframeAPIReady：當網頁完成下載播放器 API 的 JavaScript 時，API 就會呼叫這個函式，讓您可以在網頁上使用 API。因此，這個函式可能會在網頁載入時建立您要顯示的播放器物件。

開始使用

以下 HTML 範例網頁會建立內嵌播放器，該播放器會載入影片、播放六秒，然後停止播放。範例下方的清單說明瞭 HTML 中的編號註解。

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

下列清單提供上述範例的詳細資訊：

  1. 本節中的 <div> 標記會指出 IFrame API 在網頁上放置影片播放器的位置。如「載入影片播放器」一節所述，播放器物件的建構函式會根據 id 標示 <div> 標記，確保 API 將 <iframe> 放在適當位置。具體來說，IFrame API 會將 <div> 標記替換為 <iframe> 標記。

    您也可以直接在頁面上放置 <iframe> 元素。請參閱「載入影片播放器」一節瞭解如何操作。

  2. 本節的程式碼會載入 IFrame Player API JavaScript 程式碼。這個範例會使用 DOM 修改功能下載 API 程式碼，確保程式碼是透過非同步方式擷取。(<script> 標記的 async 屬性 (同樣可啟用非同步下載)，目前尚未在所有新型瀏覽器中支援，詳情請參閱這篇 Stack Overflow 解答。

  3. 玩家 API 程式碼下載完成後，系統就會執行 onYouTubeIframeAPIReady 函式。這段程式碼會定義全域變數 player，該變數會參照您要內嵌的影片播放器，然後函式會建構影片播放器物件。

  4. onReady 事件觸發時，系統會執行 onPlayerReady 函式。在本例中，函式會指出影片播放器準備就緒時，應開始播放。

  5. 當播放器狀態變更時，API 會呼叫 onPlayerStateChange 函式，這可能表示播放器正在播放、暫停或結束等。這個函式表示當播放器狀態為 1 (播放) 時，播放器應播放六秒，然後呼叫 stopVideo 函式停止影片。

載入影片播放器

載入 API 的 JavaScript 程式碼後，API 會呼叫 onYouTubeIframeAPIReady 函式，此時您可以建構 YT.Player 物件，在網頁上插入影片播放器。以下 HTML 摘錄顯示上述範例中的 onYouTubeIframeAPIReady 函式：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      'playsinline': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

影片播放器的建構函式會指定下列參數：

  1. 第一個參數會指定 DOM 元素或 HTML 元素的 id，API 會在該處插入含有播放器的 <iframe> 標記。

    IFrame API 會將指定元素替換為含有播放器的 <iframe> 元素。如果要取代的元素與插入的 <iframe> 元素顯示樣式不同，這可能會影響網頁版面配置。根據預設，<iframe> 會顯示為 inline-block 元素。

  2. 第二個參數是指定播放器選項的物件。物件包含下列屬性：
    • width (數字) – 影片播放器的寬度。預設值為 640。
    • height (數字) – 影片播放器的高度。預設值為 390。
    • videoId (字串)：YouTube 影片 ID，用於識別播放器將載入的影片。
    • playerVars (物件)：物件的屬性會標示可用於自訂播放器的播放器參數。
    • events (物件)：物件的屬性可識別 API 觸發的事件，以及 API 在事件發生時會呼叫的函式 (事件監聽器)。在這個範例中，建構函式會指出 onPlayerReady 函式會在 onReady 事件觸發時執行，而 onPlayerStateChange 函式會在 onStateChange 事件觸發時執行。

如開始使用一節所述，您可以自行建立 <iframe> 標記，而非在網頁上寫入空白 <div> 元素，然後由 Player API 的 JavaScript 程式碼將其替換為 <iframe> 元素。範例一節中的第一個範例說明如何執行這項操作。

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

請注意，如果您確實寫入 <iframe> 標記，則在建構 YT.Player 物件時，您不需要為 width 和 height 指定值，因為這些值已在 <iframe> 標記中指定為屬性；也不需要為 videoId 和 player 參數指定值，因為這些值已在 src 網址中指定。為加強安全性，您也應在網址中加入 origin 參數，並指定網址配置 (http:// 或 https://) 和代管網頁的完整網域做為參數值。origin 屬於選用項目，但加入後可防止惡意第三方 JavaScript 插入網頁，並駭入 YouTube 播放器的控制權。

如需其他建構影片播放器物件的範例，請參閱「範例」。

作業

如要呼叫 player API 方法，您必須先取得要控制的 player 物件參照。如要取得參照，請建立 YT.Player 物件，詳情請參閱本文「開始使用」和「載入影片播放器」部分。

函式

排入佇列的函式

排隊功能可讓你載入及播放影片、播放清單或其他影片清單。如果您使用下方所述的物件語法來呼叫這些函式，也可以排入或載入使用者上傳影片的清單。

這個 API 支援兩種不同的語法，可用於呼叫排隊函式。

  • 引數語法規定函式引數必須依規定順序列出。

  • 物件語法可讓您將物件做為單一參數傳遞，並為要設定的函式引數定義物件屬性。此外，API 可能支援引數語法不支援的其他功能。

舉例來說，您可以透過下列任一方式呼叫 loadVideoById 函式。請注意，物件語法支援 endSeconds 屬性，但引數語法不支援。

  • 引數語法

    loadVideoById("bHQqvYy5KYo", 5, "large")

  • 物件語法

    loadVideoById({'videoId': 'bHQqvYy5KYo',
               'startSeconds': 5,
               'endSeconds': 60});

影片的待播功能

cueVideoById

  • 引數語法

    player.cueVideoById(videoId:String,
                    startSeconds:Number):Void

  • 物件語法

    player.cueVideoById({videoId:String,
                     startSeconds:Number,
                     endSeconds:Number}):Void

這個函式會載入指定影片的縮圖，並準備播放器播放影片。除非呼叫 playVideo() 或 seekTo()，否則播放器不會要求 FLV。

  • 必填的 videoId 參數會指定要播放的影片的 YouTube 影片 ID。在 YouTube Data API 中，video 資源的 id 屬性會指定 ID。
  • 選用的 startSeconds 參數接受浮點/整數，並指定在呼叫 playVideo() 時，影片應從何時開始播放。如果您指定 startSeconds 值，然後呼叫 seekTo()，播放器會從 seekTo() 呼叫中指定的時間開始播放。當影片已就緒並可播放時，播放器會廣播 video cued 事件 (5)。
  • 選用的 endSeconds 參數僅支援物件語法，可接受浮點/整數，並指定在呼叫 playVideo() 時，影片應停止播放的時間。如果您指定 endSeconds 值，然後呼叫 seekTo()，endSeconds 值就不會再生效。

loadVideoById

  • 引數語法

    player.loadVideoById(videoId:String,
                     startSeconds:Number):Void

  • 物件語法

    player.loadVideoById({videoId:String,
                      startSeconds:Number,
                      endSeconds:Number}):Void

這個函式會載入並播放指定的影片。

  • 必填的 videoId 參數會指定要播放的影片的 YouTube 影片 ID。在 YouTube Data API 中，video 資源的 id 屬性會指定 ID。
  • 選用的 startSeconds 參數可接受浮點/整數。如果指定了這個值，影片會從最接近指定時間的關鍵影格開始播放。
  • 選用的 endSeconds 參數可接受浮點/整數。如果指定了這個屬性，影片就會在指定時間停止播放。

cueVideoByUrl

  • 引數語法

    player.cueVideoByUrl(mediaContentUrl:String,
                     startSeconds:Number):Void

  • 物件語法

    player.cueVideoByUrl({mediaContentUrl:String,
                      startSeconds:Number,
                      endSeconds:Number}):Void

這個函式會載入指定影片的縮圖，並準備播放器播放影片。除非呼叫 playVideo() 或 seekTo()，否則播放器不會要求 FLV。

  • 必須提供的 mediaContentUrl 參數會以 http://www.youtube.com/v/VIDEO_ID?version=3 格式指定完整的 YouTube 播放器網址。
  • 選用的 startSeconds 參數接受浮點/整數，並指定在呼叫 playVideo() 時，影片應從何時開始播放。如果您指定 startSeconds，然後呼叫 seekTo()，則播放器會從 seekTo() 呼叫中指定的時間開始播放。影片已就緒並可播放時，播放器會廣播 video cued 事件 (5)。
  • 選用的 endSeconds 參數僅支援物件語法，可接受浮點/整數，並指定在呼叫 playVideo() 時，影片應停止播放的時間。如果您指定 endSeconds 值，然後呼叫 seekTo()，endSeconds 值就不會再生效。

loadVideoByUrl

  • 引數語法

    player.loadVideoByUrl(mediaContentUrl:String,
                      startSeconds:Number):Void

  • 物件語法

    player.loadVideoByUrl({mediaContentUrl:String,
                       startSeconds:Number,
                       endSeconds:Number}):Void

這個函式會載入並播放指定的影片。

  • 必須提供的 mediaContentUrl 參數會以 http://www.youtube.com/v/VIDEO_ID?version=3 格式指定完整的 YouTube 播放器網址。
  • 選用的 startSeconds 參數接受浮點/整數，並指定影片應從何時開始播放。如果指定 startSeconds (數字可為浮點值)，影片會從最接近指定時間的關鍵影格開始播放。
  • 選用的 endSeconds 參數僅支援物件語法，可接受浮點/整數，並指定影片應停止播放的時間。

為清單排入佇列的函式

cuePlaylist 和 loadPlaylist 函式可讓您載入及播放播放清單。如果您使用物件語法呼叫這些函式，也可以排入 (或載入) 使用者上傳影片的清單。

由於函式會根據使用引數語法或物件語法呼叫而有不同的運作方式，因此下方會說明這兩種呼叫方法。

cuePlaylist

  • 引數語法

    player.cuePlaylist(playlist:String|Array,
                   index:Number,
                   startSeconds:Number):Void
     將指定的播放清單加入待播清單。當播放清單已就緒並可播放時，播放器會廣播 video cued 事件 (5)。

    • 必要的 playlist 參數會指定 YouTube 影片 ID 陣列。在 YouTube Data API 中，video 資源的 id 屬性會識別影片 ID。

    • 選用的 index 參數會指定播放清單中要播放的第一部影片的索引。這個參數使用以零為基底的索引，且預設參數值為 0，因此預設行為是載入並播放播放清單中的首部影片。

    • 選用的 startSeconds 參數會接受浮點/整數，並指定在呼叫 playVideo() 函式時，播放清單中第一部影片的時間。如果您指定 startSeconds 值，然後呼叫 seekTo()，播放器會從 seekTo() 呼叫中指定的時間開始播放。如果您要提示播放清單，然後呼叫 playVideoAt() 函式，播放器就會從指定影片的開頭開始播放。

  • 物件語法

    player.cuePlaylist({listType:String,
                    list:String,
                    index:Number,
                    startSeconds:Number}):Void
     將指定的影片清單加入待播清單。清單可以是播放清單，或是使用者上傳的影片動態消息。排入搜尋結果清單的功能已淘汰，自 2020 年 11 月 15 日起，我們將不再支援此功能。

    當清單已就緒並可播放時，播放器會廣播 video cued 事件 (5)。

    • 選用的 listType 屬性會指定要擷取的結果動態饋給類型。有效值為 playlist 和 user_uploads。自 2020 年 11 月 15 日起，我們將不再支援已淘汰的值 search。預設值為 playlist。

    • 這個必填的 list 屬性包含一個索引鍵，用來識別 YouTube 應傳回的特定影片清單。

      • 如果 listType 屬性值為 playlist，list 屬性會指定播放清單 ID 或影片 ID 陣列。在 YouTube Data API 中，playlist 資源的 id 屬性會識別播放清單的 ID，而 video 資源的 id 屬性會指定影片 ID。
      • 如果 listType 屬性值為 user_uploads，則 list 屬性會標示要傳回上傳影片的使用者。
      • 如果 listType 屬性值為 search，則 list 屬性會指定搜尋查詢。注意：這項功能已淘汰，自 2020 年 11 月 15 日起將不再支援。

    • 選用的 index 屬性會指定播放清單中第一部影片的索引。這個參數使用以零為基底的索引，且預設參數值為 0，因此預設行為是載入並播放清單中的首部影片。

    • 選用的 startSeconds 屬性可接受浮點/整數，並指定在呼叫 playVideo() 函式時，清單中第一部影片應從何時開始播放。如果您指定 startSeconds 值，然後呼叫 seekTo()，播放器會從 seekTo() 呼叫中指定的時間開始播放。如果您先設定清單，再呼叫 playVideoAt() 函式，播放器就會從指定影片的開頭開始播放。

loadPlaylist

  • 引數語法

    player.loadPlaylist(playlist:String|Array,
                    index:Number,
                    startSeconds:Number):Void
     這個函式會載入並播放指定的播放清單。

    • 必要的 playlist 參數會指定 YouTube 影片 ID 陣列。在 YouTube Data API 中，video 資源的 id 屬性會指定影片 ID。

    • 選用的 index 參數會指定播放清單中要播放的第一部影片的索引。這個參數使用以零為基底的索引，且預設參數值為 0，因此預設行為是載入並播放播放清單中的首部影片。

    • 選用的 startSeconds 參數會接受浮點/整數，並指定播放清單中第一部影片應從何時開始播放。

  • 物件語法

    player.loadPlaylist({list:String,
                     listType:String,
                     index:Number,
                     startSeconds:Number}):Void
     這個函式會載入並播放指定的清單。清單可以是播放清單，或是使用者上傳的影片動態消息。載入搜尋結果清單的功能已淘汰，自 2020 年 11 月 15 日起將不再支援。

    • 選用的 listType 屬性會指定要擷取的結果動態饋給類型。有效值為 playlist 和 user_uploads。自 2020 年 11 月 15 日起，我們將不再支援已淘汰的值 search。預設值為 playlist。

    • 這個必填的 list 屬性包含一個索引鍵，用來識別 YouTube 應傳回的特定影片清單。

      • 如果 listType 屬性值為 playlist，list 屬性會指定播放清單 ID 或影片 ID 陣列。在 YouTube Data API 中，playlist 資源的 id 屬性會指定播放清單的 ID，而 video 資源的 id 屬性則會指定影片 ID。
      • 如果 listType 屬性值為 user_uploads，則 list 屬性會標示要傳回上傳影片的使用者。
      • 如果 listType 屬性值為 search，則 list 屬性會指定搜尋查詢。注意：這項功能已淘汰，自 2020 年 11 月 15 日起將不再支援。

    • 選用的 index 屬性會指定播放清單中第一部影片的索引。這個參數使用以零為基底的索引，且預設參數值為 0，因此預設行為是載入並播放清單中的首部影片。

    • 選用的 startSeconds 屬性可接受浮點/整數，並指定清單中第一部影片應從何時開始播放。

播放控制項和播放器設定

播放影片

player.playVideo():Void
播放目前已設定提示/載入的影片。執行此函式後，播放器的最終狀態會是 playing (1)。

注意：只有透過播放器中的原生播放按鈕啟動播放，系統才會將播放次數計入影片的官方觀看次數。
player.pauseVideo():Void
暫停目前播放的影片。這個函式執行後的最終播放器狀態會是 paused (2)，除非播放器在函式呼叫時處於 ended (0) 狀態，在這種情況下，播放器狀態不會變更。
player.stopVideo():Void
停止並取消載入目前的影片。這項功能應只用於使用者不會在播放器中觀看其他影片的少數情況。如果您想暫停影片，請直接呼叫 pauseVideo 函式。如果您想變更播放器正在播放的影片，可以呼叫其中一個佇列函式，而無須先呼叫 stopVideo。

重要事項：pauseVideo 函式會讓播放器處於 paused (2) 狀態，而 stopVideo 函式則可讓播放器處於任何非播放狀態，包括 ended (0)、paused (2)、video cued (5) 或 unstarted (-1)。
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
跳轉到影片中的指定時間。如果播放器在呼叫函式時處於暫停狀態，則會維持暫停狀態。如果函式是從其他狀態 (playing、video cued 等) 呼叫，播放器就會播放影片。

  • seconds 參數會指出玩家應前進的時間。

    除非播放器已下載使用者要尋找的影片片段，否則會在該時間點前進到最近的關鍵影格。

  • 如果 seconds 參數指定的時間不在目前緩衝的影片資料範圍內，allowSeekAhead 參數會決定播放器是否會向伺服器提出新要求。

    建議您在使用者沿著影片進度列拖曳滑鼠時，將這個參數設為 false，然後在使用者放開滑鼠時設為 true。使用者只要捲動至影片中未緩衝的時間點，即可透過這種方法捲動至影片的不同時間點，而無需要求新的影片串流。使用者放開滑鼠按鈕時，播放器會跳到影片中所需的時間點，並視需要要求新的影片串流。

控制 360 度影片的播放

注意：行動裝置的 360 度影片播放體驗支援功能有限。在未支援的裝置上，360 度影片會顯示為扭曲，而且完全沒有任何可用的方式來變更觀看視角，包括透過 API、使用方向感應器或回應裝置螢幕上的觸控/拖曳動作。

player.getSphericalProperties():Object
擷取描述觀眾目前觀看影片的角度或視角的屬性。此外：
  • 這個物件只會填入 360 度影片 (又稱為球形影片) 的資料。
  • 如果目前的影片不是 360 度影片，或是函式是從不支援的裝置呼叫，則函式會傳回空物件。
  • 在支援的行動裝置上，如果 enableOrientationSensor 屬性設為 true，則此函式會傳回物件，其中 fov 屬性包含正確的值，其他屬性則設為 0。
物件包含下列屬性：
屬性
yaw 這個數字介於 [0, 360) 之間，代表以度數表示的視圖水平角度，反映使用者將視圖轉向左側或右側的程度。中性位置是指在等角投影中面向影片中心的方向，代表 0°，這個值會隨著觀眾向左轉而增加。
pitch 這個數字介於 [-90, 90] 之間，代表以度數表示的視圖垂直角度，反映使用者調整視圖向上或向下看的程度。中性位置是指在等角投影中面向影片中心的角度，代表 0°，這個值會隨著觀眾向上看而增加。
roll 這個數字介於 [-180, 180] 之間，代表檢視畫面的順時針或逆時針旋轉角度 (以度為單位)。中性位置是指等角投影法中的水平軸與檢視畫面水平軸平行的 0°。隨著檢視畫面順時針旋轉，這個值會增加；反之，如果檢視畫面逆時針旋轉，這個值會減少。

請注意，嵌入式播放器不會顯示使用者介面，無法調整檢視畫面的滾動速度。您可以透過下列互斥的方式調整傾斜角度：
  1. 使用行動瀏覽器中的方向感應器，為檢視畫面提供傾斜功能。如果已啟用方向感應器，getSphericalProperties 函式一律會將 0 傳回為 roll 屬性的值。
  2. 如果方向感應器已停用，請使用這個 API 將傾斜度設為非零值。
fov 這個數字介於 [30, 120] 之間，代表沿著可視區域較長邊測量的檢視區域視野範圍 (以度為單位)。系統會自動調整較短邊，使其與檢視畫面的顯示比例成正比。

預設值為 100 度。降低值就像放大影片內容，而增加值則像是縮小影片內容。在影片處於全螢幕模式時，可以使用 API 或滑鼠滾輪調整這個值。
player.setSphericalProperties(properties:Object):Void
設定 360 度影片的播放影片方向。(如果目前的影片不是球面，則無論輸入內容為何，此方法都會無操作)。

播放器檢視畫面會回應對此方法的呼叫，並更新以反映 properties 物件中任何已知屬性的值。該檢視畫面會為未包含在該物件中的任何其他已知屬性保留值。

此外：
  • 如果物件包含不明和/或意外的屬性，則播放器會忽略這些屬性。
  • 如本節開頭所述，並非所有行動裝置都支援 360 度影片播放功能。
  • 根據預設，在支援的行動裝置上，這個函式只會設定 fov 屬性，不會影響 360 度影片播放的 yaw、pitch 和 roll 屬性。詳情請參閱下方的 enableOrientationSensor 屬性。
傳遞至函式的 properties 物件包含下列屬性：
屬性
yaw 請參閱上方的定義。
pitch 請參閱上方的定義。
roll 請參閱上方的定義。
fov 請參閱上方的定義。
enableOrientationSensor 注意：這個屬性只會影響支援裝置的 360 度觀看體驗。這個布林值會指出 IFrame 嵌入內容是否應回應事件，以便在支援裝置的方向發生變化時發出信號，例如行動瀏覽器的 DeviceOrientationEvent。預設參數值為 true。

支援的行動裝置
  • 如果值為 true，內嵌播放器會僅依據裝置的移動情形調整 yaw、pitch 和 roll 屬性，以便播放 360 度影片。不過，您還是可以透過 API 變更 fov 屬性，事實上，API 是變更行動裝置上 fov 屬性的唯一方法。此為預設行為。
  • 如果值為 false，則裝置的移動不會影響 360 度觀看體驗，且必須透過 API 設定 yaw、pitch、roll 和 fov 屬性。

不支援的行動裝置
enableOrientationSensor 屬性值不會對播放體驗造成任何影響。

播放播放清單中的影片

player.nextVideo():Void
這個函式會載入播放清單中的下一部影片並播放。

  • 如果在觀看播放清單中的最後一部影片時呼叫 player.nextVideo()，且播放清單已設為持續播放 (loop)，則播放器會載入並播放清單中的第一部影片。

  • 如果在觀看播放清單中的最後一部影片時呼叫 player.nextVideo()，且播放清單未設為持續播放，則播放作業會結束。

player.previousVideo():Void
這個函式會載入播放清單中的上一部影片並播放。

  • 如果在觀看播放清單中的第一部影片時呼叫 player.previousVideo()，且播放清單已設為連續播放 (loop)，則播放器會載入並播放清單中的最後一部影片。

  • 如果在觀看播放清單中第一部影片時呼叫 player.previousVideo()，且播放清單未設為持續播放，則播放器會從頭開始播放第一部播放清單影片。

player.playVideoAt(index:Number):Void
這個函式會載入播放清單中的指定影片並播放。

  • 必填的 index 參數會指定要在播放清單中播放的影片索引。這個參數採用以零為基底的索引，因此 0 值會識別清單中的第 1 部影片。如果您已隨機播放播放清單，這個函式會在隨機播放清單中播放指定位置的影片。

調整播放器音量

player.mute():Void
將播放器設為靜音。
player.unMute():Void
將播放器取消靜音。
player.isMuted():Boolean
如果播放器設為靜音，則會傳回 true，否則傳回 false。
player.setVolume(volume:Number):Void
設定音量。接受介於 0 和 100 之間的整數。
player.getVolume():Number
傳回播放器目前的音量，為介於 0 和 100 之間的整數。請注意，即使播放器設為靜音，getVolume() 也會傳回音量。

設定播放器大小

player.setSize(width:Number, height:Number):Object
設定包含播放器的 <iframe> 大小 (以像素為單位)。

設定播放速度

player.getPlaybackRate():Number
這個函式會擷取目前播放影片的播放速率。預設播放速率為 1，表示影片以正常速度播放。播放率可能包含 0.25、0.5、1、1.5 和 2 等值。
player.setPlaybackRate(suggestedRate:Number):Void
這個函式會設定目前影片的建議播放速率。如果播放速度有所變更，系統只會針對已排入待播清單或正在播放的影片進行調整。如果您為已標示的影片設定播放速度，在呼叫 playVideo 函式或使用者直接透過播放器控制項啟動播放時，該速度仍會生效。此外，呼叫函式以排定或載入影片或播放清單 (cueVideoById、loadVideoById 等) 時，會將播放速率重設為 1。

呼叫此函式並不保證播放速率會實際變更。不過，如果播放速率確實有所變更，系統就會觸發 onPlaybackRateChange 事件，而您的程式碼應回應該事件，而非呼叫 setPlaybackRate 函式的事實。

getAvailablePlaybackRates 方法會傳回目前播放影片的可用播放速率。不過，如果您將 suggestedRate 參數設為不支援的整數或浮點值，播放器會將該值以無條件捨去法捨入至 1 方向上最接近的支援值。
player.getAvailablePlaybackRates():Array
這個函式會傳回目前影片可用的播放速率組合。預設值為 1，表示影片以正常速度播放。

這個函式會傳回數字陣列，並依播放速度由慢到快排序。即使播放器不支援可變播放速度，陣列仍應一律包含至少一個值 (1)。

設定播放清單的播放行為

player.setLoop(loopPlaylists:Boolean):Void

此函式可指出影片播放器應連續播放播放清單，還是應在播放清單中的最後一部影片結束後停止播放。預設行為是播放清單不會循環播放。

即使您載入或排定不同的播放清單，這項設定仍會保留。也就是說，如果您載入播放清單，並以 true 的值呼叫 setLoop 函式，然後載入第二個播放清單，第二個播放清單也會循環播放。

必要的 loopPlaylists 參數會識別循環行為。

  • 如果參數值為 true，影片播放器就會持續播放播放清單。播放清單中的最後一部影片後，影片播放器會回到播放清單的開頭，並再次播放。

  • 如果參數值為 false，則影片播放器會在播放播放清單中的最後一部影片後結束播放。

player.setShuffle(shufflePlaylist:Boolean):Void

這個函式會指出是否應隨機播放播放清單的影片，以便播放順序與播放清單建立者指定的順序不同。如果在播放清單開始播放後將其設為隨機播放，系統會重新排序清單，並繼續播放正在播放的影片。系統會根據重新排序的清單，選擇下一部要播放的影片。

如果您載入或排入其他播放清單，這項設定就不會保留，也就是說，如果您載入播放清單、呼叫 setShuffle 函式，然後載入第二個播放清單，第二個播放清單就不會隨機播放。

必要的 shufflePlaylist 參數會指出 YouTube 是否應隨機播放播放清單。

  • 如果參數值為 true，YouTube 就會隨機播放播放清單中的內容。如果您指示函式隨機播放已隨機播放的播放清單，YouTube 會再次隨機播放。

  • 如果參數值為 false，YouTube 會將播放清單的順序改回原始順序。

播放狀態

player.getVideoLoadedFraction():Float
傳回介於 0 和 1 之間的數字，指定播放器顯示的影片緩衝百分比。這個方法傳回的數字比已淘汰的 getVideoBytesLoaded 和 getVideoBytesTotal 方法更可靠。
player.getPlayerState():Number
傳回播放器的狀態。可能的值包括：
  • -1 – 未啟動
  • 0 – 已結束
  • 1 – 播放
  • 2 – 已暫停
  • 3 – 緩衝
  • 5 – 影片已播放
player.getCurrentTime():Number
傳回影片開始播放後經過的時間 (以秒為單位)。
player.getVideoStartBytes():Number
已於 2012 年 10 月 31 日淘汰。傳回影片檔案開始載入的位元組數。(這個方法現在一律會傳回 0 值)。示例情境：使用者快轉至尚未載入的時間點，而播放器會提出新要求，播放尚未載入的影片片段。
player.getVideoBytesLoaded():Number
已於 2012 年 7 月 18 日淘汰。請改用 getVideoLoadedFraction 方法，判斷影片的緩衝百分比。

這個方法會傳回介於 0 和 1000 之間的值，該值大約等於已載入的影片量。您可以將 getVideoBytesLoaded 值除以 getVideoBytesTotal 值，計算出已載入的影片片段。
player.getVideoBytesTotal():Number
已於 2012 年 7 月 18 日淘汰。請改用 getVideoLoadedFraction 方法，判斷影片的緩衝百分比。

傳回目前載入/播放的影片大小 (以位元組為單位)，或影片大小的近似值。

這個方法一律會傳回 1000 值。您可以將 getVideoBytesLoaded 值除以 getVideoBytesTotal 值，計算出已載入的影片片段。

擷取影片資訊

player.getDuration():Number
會傳回目前播放影片的片長 (以秒為單位)。請注意，在影片的 metadata 載入前，getDuration() 會傳回 0，而這通常會在影片開始播放後發生。

如果目前播放的影片是直播活動，getDuration() 函式會傳回直播影片串流開始後經過的時間。具體來說，這是指影片在未重設或中斷的情況下，持續串流的時間。此外，由於串流可能會在活動開始時間之前開始，因此這段時間通常會比實際活動時間長。
player.getVideoUrl():String
傳回目前載入/播放的影片的 YouTube.com 網址。
player.getVideoEmbedCode():String
傳回目前載入/播放的影片的嵌入程式碼。

擷取播放清單資訊

player.getPlaylist():Array
這個函式會傳回播放清單中影片 ID 的陣列，並依目前的順序排列。根據預設，這個函式會依播放清單擁有者指定的順序傳回影片 ID。不過，如果您呼叫 setShuffle 函式來隨機播放播放清單的順序，getPlaylist() 函式的傳回值就會反映隨機播放的順序。
player.getPlaylistIndex():Number
這個函式會傳回目前播放的播放清單影片索引。

  • 如果您沒有隨機播放播放清單，則傳回值會指出播放清單建立者放置影片的位置。傳回值會使用以零為基底的索引，因此 0 值會識別播放清單中的第一部影片。

  • 如果您已將播放清單設為隨機播放，則傳回值會指出影片在隨機播放清單中的順序。

新增或移除事件監聽器

player.addEventListener(event:String, listener:String):Void
為指定的 event 新增監聽器函式。下方的「事件」部分會指出玩家可能觸發的不同事件。事件監聽器是字串，可指定在指定事件觸發時要執行的函式。
player.removeEventListener(event:String, listener:String):Void
移除指定 event 的監聽器函式。listener 是字串，用來識別在指定事件觸發時不再執行的函式。

存取及修改 DOM 節點

player.getIframe():Object
這個方法會傳回嵌入 <iframe> 的 DOM 節點。
player.destroy():Void
移除含有播放器的 <iframe>。

活動

API 會觸發事件，通知應用程式嵌入式播放器的變更。如上一節所述，您可以在建構 YT.Player 物件時新增事件監聽器，以便訂閱事件，也可以使用 addEventListener 函式。

API 會將事件物件傳遞為每個函式的唯一引數。事件物件具有下列屬性：

  • 事件的 target 會識別與事件相對應的影片播放器。
  • 事件的 data 會指定與事件相關的值。請注意，onReady 和 onAutoplayBlocked 事件不會指定 data 屬性。

下列清單定義了 API 觸發的事件：

onReady
每當玩家完成載入作業並準備開始接收 API 呼叫時，就會觸發這個事件。如果您想在播放器準備就緒後自動執行特定作業 (例如播放影片或顯示影片相關資訊)，應用程式應實作此函式。

以下範例顯示處理此事件的函式範例。API 傳遞至函式的事件物件含有 target 屬性，可用於識別播放器。這個函式會擷取目前載入的影片嵌入程式碼、開始播放影片，並在 id 值為 embed-code 的網頁元素中顯示嵌入程式碼。
function onPlayerReady(event) {
  var embedCode = event.target.getVideoEmbedCode();
  event.target.playVideo();
  if (document.getElementById('embed-code')) {
    document.getElementById('embed-code').innerHTML = embedCode;
  }
}
onStateChange
每當播放器狀態變更時，就會觸發此事件。 API 傳遞至事件監聽器函式的事件物件 data 屬性，會指定與新播放器狀態相對應的整數。可能的值包括：

  • -1 (未開始)
  • 0 (已結束)
  • 1 (播放中)
  • 2 (暫停)
  • 3 (緩衝)
  • 5 (影片已播放)。

播放器首次載入影片時，會廣播 unstarted (-1) 事件。當影片已就緒並可播放時，播放器會廣播 video cued (5) 事件。您可以在程式碼中指定整數值，也可以使用下列其中一個命名空間變數：

  • YT.PlayerState.ENDED
  • YT.PlayerState.PLAYING
  • YT.PlayerState.PAUSED
  • YT.PlayerState.BUFFERING
  • YT.PlayerState.CUED

onPlaybackQualityChange
每當影片播放品質變更時，就會觸發這項事件。這可能表示觀眾的播放環境有所變動。如要進一步瞭解影響播放條件或可能觸發事件的因素，請參閱 YouTube 說明中心。

API 傳遞至事件監聽器函式的事件物件 data 屬性值，會是用於識別新播放品質的字串。 可能的值包括：

  • small
  • medium
  • large
  • hd720
  • hd1080
  • highres

onPlaybackRateChange
每當影片播放速率變更時，系統就會觸發這個事件。舉例來說，如果您呼叫 setPlaybackRate(suggestedRate) 函式，當播放速率實際變更時，系統就會觸發這個事件。應用程式應回應事件，且不應假設在呼叫 setPlaybackRate(suggestedRate) 函式時，播放速率會自動變更。同樣地，程式碼也不應假設影片播放速率只會在明確呼叫 setPlaybackRate 時變更。

API 傳遞至事件監聽器函式的事件物件 data 屬性值，會是用於識別新播放速率的數字。 getAvailablePlaybackRates 方法會傳回目前已標示或播放的影片有效播放速率清單。
onError
如果播放器發生錯誤，就會觸發這個事件。 API 會將 event 物件傳遞至事件監聽器函式。該物件的 data 屬性會指定整數，用於識別發生的錯誤類型。 可能的值包括：

  • 2：要求含有無效的參數值。舉例來說，如果指定的影片 ID 不含 11 個字元，或是影片 ID 含有無效字元 (例如驚嘆號或星號)，就會發生這個錯誤。
  • 5 – 要求的內容無法在 HTML5 播放器中播放，或發生與 HTML5 播放器相關的其他錯誤。
  • 100：找不到要求的影片。影片已移除 (無論原因為何) 或已標示為私人影片，就會發生這項錯誤。
  • 101：要求的影片擁有者不允許在嵌入式播放器中播放影片。
  • 150：這個錯誤與 101 相同。這只是 101 錯誤的偽裝！
onApiChange
這個事件會觸發，表示播放器已載入 (或卸載) 含有公開 API 方法的模組。應用程式可以監聽此事件，然後輪詢播放器，以決定要為最近載入的模組公開哪些選項。應用程式隨後即可擷取或更新這些選項的現有設定。

下列指令會擷取可設定播放器選項的模組名稱陣列：
player.getOptions();
 目前，您只能為 captions 模組設定選項，該模組會處理播放器中的隱藏式輔助字幕。收到 onApiChange 事件後，應用程式可以使用下列指令，判斷可為 captions 模組設定哪些選項：
player.getOptions('captions');
 透過使用這個指令對玩家進行輪詢，您可以確認要存取的選項確實可供存取。下列指令可擷取及更新模組選項：
Retrieving an option:
player.getOption(module, option);

Setting an option
player.setOption(module, option, value);
 下表列出 API 支援的選項：

模組 選項 說明
字幕 fontSize 這個選項可調整在播放器中顯示的字幕字型大小。

有效值為 -1、0、1、2 和 3。預設大小為 0，最小大小為 -1。如果將這個選項設為小於 -1 的整數，系統就會顯示最小的字幕大小；如果設為大於 3 的整數，系統就會顯示最大的字幕大小。
字幕 重新載入 這個選項會重新載入正在播放的影片隱藏式輔助字幕資料。如果您擷取選項的值，則值會是 null。將值設為 true 即可重新載入隱藏式輔助字幕資料。
onAutoplayBlocked
只要瀏覽器封鎖自動播放或程式碼影片播放功能 (統稱為「自動播放」)，就會觸發這個事件。這包括嘗試使用下列任何播放器 API 的播放作業：

大多數瀏覽器都設有政策，可在特定條件成立時，封鎖電腦、行動裝置和其他環境中的自動播放功能。這項政策可能會在以下情況下觸發：在未經使用者互動情況下，系統未經過使用者互動就播放音訊，或是未設定允許跨來源 iframe 自動播放的權限政策。

如需完整詳細資料，請參閱瀏覽器專屬政策 (Apple Safari / WebKit、Google Chrome、Mozilla Firefox) 和 Mozilla 的自動播放指南。

範例

建立 YT.Player 物件

  • 範例 1：使用現有的 <iframe> 搭配 API

    在這個範例中，頁面上的 <iframe> 元素已定義要使用哪個播放器來使用 API。請注意，播放器的 src 網址必須將 enablejsapi 參數設為 1，或是 <iframe> 元素的 enablejsapi 屬性必須設為 true。

    onPlayerReady 函式會在播放器就緒時，將播放器周圍的邊框顏色變更為橘色。onPlayerStateChange 函式會根據目前的播放器狀態，變更播放器周圍邊框的顏色。舉例來說，播放器播放時是綠色、暫停時是紅色、緩衝時是藍色，以此類推。

    本範例使用以下程式碼：

    <iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"
></iframe>

<script type="text/javascript">
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('existing-iframe-example', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
    document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
    var color;
    if (playerStatus == -1) {
      color = "#37474F"; // unstarted = gray
    } else if (playerStatus == 0) {
      color = "#FFFF00"; // ended = yellow
    } else if (playerStatus == 1) {
      color = "#33691E"; // playing = green
    } else if (playerStatus == 2) {
      color = "#DD2C00"; // paused = red
    } else if (playerStatus == 3) {
      color = "#AA00FF"; // buffering = purple
    } else if (playerStatus == 5) {
      color = "#FF6DOO"; // video cued = orange
    }
    if (color) {
      document.getElementById('existing-iframe-example').style.borderColor = color;
    }
  }
  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }
</script>

  • 示例 2：播放音量過大

    這個範例會建立 1280 x 720 像素的影片播放器。onReady 事件的事件監聽器接著會呼叫 setVolume 函式，將音量調到最高設定。

    function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('player', {
    width: 1280,
    height: 720,
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}

function onPlayerReady(event) {
  event.target.setVolume(100);
  event.target.playVideo();
}

  • 範例 3： 這個範例會設定播放器參數，讓系統在影片載入時自動播放影片，並隱藏影片播放器的控制項。並為 API 廣播的多個事件新增事件監聽器。

    function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('player', {
    videoId: 'M7lc1UVf-VE',
    playerVars: { 'autoplay': 1, 'controls': 0 },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}

控制 360 度影片

本範例使用以下程式碼：

<style>
  .current-values {
    color: #666;
    font-size: 12px;
  }
</style>
<!-- The player is inserted in the following div element -->
<div id="spherical-video-player"></div>

<!-- Display spherical property values and enable user to update them. -->
<table style="border: 0; width: 640px;">
  <tr style="background: #fff;">
    <td>
      <label for="yaw-property">yaw: </label>
      <input type="text" id="yaw-property" style="width: 80px"><br>
      <div id="yaw-current-value" class="current-values"> </div>
    </td>
    <td>
      <label for="pitch-property">pitch: </label>
      <input type="text" id="pitch-property" style="width: 80px"><br>
      <div id="pitch-current-value" class="current-values"> </div>
    </td>
    <td>
      <label for="roll-property">roll: </label>
      <input type="text" id="roll-property" style="width: 80px"><br>
      <div id="roll-current-value" class="current-values"> </div>
    </td>
    <td>
      <label for="fov-property">fov: </label>
      <input type="text" id="fov-property" style="width: 80px"><br>
      <div id="fov-current-value" class="current-values"> </div>
    </td>
    <td style="vertical-align: bottom;">
      <button id="spherical-properties-button">Update properties</button>
    </td>
  </tr>
</table>

<script type="text/javascript">
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var PROPERTIES = ['yaw', 'pitch', 'roll', 'fov'];
  var updateButton = document.getElementById('spherical-properties-button');

  // Create the YouTube Player.
  var ytplayer;
  function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('spherical-video-player', {
        height: '360',
        width: '640',
        videoId: 'FAtdv94yzp4',
    });
  }

  // Don't display current spherical settings because there aren't any.
  function hideCurrentSettings() {
    for (var p = 0; p < PROPERTIES.length; p++) {
      document.getElementById(PROPERTIES[p] + '-current-value').innerHTML = '';
    }
  }

  // Retrieve current spherical property values from the API and display them.
  function updateSetting() {
    if (!ytplayer || !ytplayer.getSphericalProperties) {
      hideCurrentSettings();
    } else {
      let newSettings = ytplayer.getSphericalProperties();
      if (Object.keys(newSettings).length === 0) {
        hideCurrentSettings();
      } else {
        for (var p = 0; p < PROPERTIES.length; p++) {
          if (newSettings.hasOwnProperty(PROPERTIES[p])) {
            currentValueNode = document.getElementById(PROPERTIES[p] +
                                                       '-current-value');
            currentValueNode.innerHTML = ('current: ' +
                newSettings[PROPERTIES[p]].toFixed(4));
          }
        }
      }
    }
    requestAnimationFrame(updateSetting);
  }
  updateSetting();

  // Call the API to update spherical property values.
  updateButton.onclick = function() {
    var sphericalProperties = {};
    for (var p = 0; p < PROPERTIES.length; p++) {
      var propertyInput = document.getElementById(PROPERTIES[p] + '-property');
      sphericalProperties[PROPERTIES[p]] = parseFloat(propertyInput.value);
    }
    ytplayer.setSphericalProperties(sphericalProperties);
  }
</script>

Android WebView Media Integrity API 整合

YouTube 已擴充 Android WebView Media Integrity API，讓嵌入式媒體播放器 (包括 Android 應用程式中嵌入的 YouTube 播放器) 能夠驗證嵌入式應用程式的真實性。這項變更後，嵌入的應用程式會自動將已認證的應用程式 ID 傳送至 YouTube。透過使用這個 API 收集的資料包括應用程式中繼資料 (套件名稱、版本編號和簽署憑證)，以及 Google Play 服務產生的裝置認證權杖。

這項資料會用於驗證應用程式和裝置的完整性。系統會對這類資料進行加密，並在固定的保留期限過後刪除，不會與第三方分享。應用程式開發人員可以在 WebView Media Integrity API 中設定應用程式身分。設定支援選擇不採用選項。

修訂版本記錄

June 24, 2024

The documentation has been updated to note that YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube.

November 20, 2023

The new onAutoplayBlocked event API is now available. This event notifies your application if the browser blocks autoplay or scripted playback. Verification of autoplay success or failure is an established paradigm for HTMLMediaElements, and the onAutoplayBlocked event now provides similar functionality for the IFrame Player API.

April 27, 2021

The Getting Started and Loading a Video Player sections have been updated to include examples of using a playerVars object to customize the player.

October 13, 2020

Note: This is a deprecation announcement for the embedded player functionality that lets you configure the player to load search results. This announcement affects the IFrame Player API's queueing functions for lists, cuePlaylist and loadPlaylist.

This change will become effective on or after 15 November 2020. After that time, calls to the cuePlaylist or loadPlaylist functions that set the listType property to search will generate a 4xx response code, such as 404 (Not Found) or 410 (Gone). This change also affects the list property for those functions as that property no longer supports the ability to specify a search query.

As an alternative, you can use the YouTube Data API's search.list method to retrieve search results and then load selected videos in the player.

October 24, 2019

The documentation has been updated to reflect the fact that the API no longer supports functions for setting or retrieving playback quality. As explained in this YouTube Help Center article, to give you the best viewing experience, YouTube adjusts the quality of your video stream based on your viewing conditions.

The changes explained below have been in effect for more than one year. This update merely aligns the documentation with current functionality:

  • The getPlaybackQuality, setPlaybackQuality, and getAvailableQualityLevels functions are no longer supported. In particular, calls to setPlaybackQuality will be no-op functions, meaning they will not actually have any impact on the viewer's playback experience.
  • The queueing functions for videos and playlists -- cueVideoById, loadVideoById, etc. -- no longer support the suggestedQuality argument. Similarly, if you call those functions using object syntax, the suggestedQuality field is no longer supported. If suggestedQuality is specified, it will be ignored when the request is handled. It will not generate any warnings or errors.
  • The onPlaybackQualityChange event is still supported and might signal a change in the viewer's playback environment. See the Help Center article referenced above for more information about factors that affect playback conditions or that might cause the event to fire.

May 16, 2018

The API now supports features that allow users (or embedders) to control the viewing perspective for 360° videos:

  • The getSphericalProperties function retrieves the current orientation for the video playback. The orientation includes the following data:
    • yaw - represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right
    • pitch - represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down
    • roll - represents the rotational angle (clockwise or counterclockwise) of the view in degrees.
    • fov - represents the field-of-view of the view in degrees, which reflects the extent to which the user zooms in or out on the video.
  • The setSphericalProperties function modifies the view to match the submitted property values. In addition to the orientation values described above, this function supports a Boolean field that indicates whether the IFrame embed should respond to DeviceOrientationEvents on supported mobile devices.

This example demonstrates and lets you test these new features.

June 19, 2017

This update contains the following changes:

  • Documentation for the YouTube Flash Player API and YouTube JavaScript Player API has been removed and redirected to this document. The deprecation announcement for the Flash and JavaScript players was made on January 27, 2015. If you haven't done so already, please migrate your applications to use IFrame embeds and the IFrame Player API.

August 11, 2016

This update contains the following changes:

  • The newly published YouTube API Services Terms of Service ("the Updated Terms"), discussed in detail on the YouTube Engineering and Developers Blog, provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms, which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.

    The full set of new documents is described in the revision history for the Updated Terms. In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history. You can subscribe to an RSS feed listing changes in that revision history from a link in that document.

June 29, 2016

This update contains the following changes:

  • The documentation has been corrected to note that the onApiChange method provides access to the captions module and not the cc module.

June 24, 2016

The Examples section has been updated to include an example that demonstrates how to use the API with an existing <iframe> element.

January 6, 2016

The clearVideo function has been deprecated and removed from the documentation. The function no longer has any effect in the YouTube player.

December 18, 2015

European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy. We have added a notice of this requirement in our YouTube API Terms of Service.

April 28, 2014

This update contains the following changes:

March 25, 2014

This update contains the following changes:

  • The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.

July 23, 2013

This update contains the following changes:

  • The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.

October 31, 2012

This update contains the following changes:

  • The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.

    In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)

  • When called using object syntax, each of the video queueing functions supports an endSeconds property, which accepts a float/integer and specifies the time when the video should stop playing when playVideo() is called.

  • The getVideoStartBytes method has been deprecated. The method now always returns a value of 0.

August 22, 2012

This update contains the following changes:

  • The example in the Loading a video player section that demonstrates how to manually create the <iframe> tag has been updated to include a closing </iframe> tag since the onYouTubeIframeAPIReady function is only called if the closing </iframe> element is present.

August 6, 2012

This update contains the following changes:

  • The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.

  • The API supports several new functions and one new event that can be used to control the video playback speed:

    • Functions

      • getAvailablePlaybackRates – Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.
      • getPlaybackRate – Retrieve the playback rate for the cued or playing video.
      • setPlaybackRate – Set the playback rate for the cued or playing video.

    • Events

July 19, 2012

This update contains the following changes:

  • The new getVideoLoadedFraction method replaces the now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods. The new method returns the percentage of the video that the player shows as buffered.

  • The onError event may now return an error code of 5, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.

  • The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the onYouTubeIframeAPIReady function. Previously, the section indicated that the required function was named onYouTubePlayerAPIReady. Code samples throughout the document have also been updated to use the new name.

    Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady function and an onYouTubePlayerAPIReady function, both functions will be called, and the onYouTubeIframeAPIReady function will be called first.

  • The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to http://www.youtube.com/iframe_api. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api) will continue to work.

July 16, 2012

This update contains the following changes:

  • The Operations section now explains that the API supports the setSize() and destroy() methods. The setSize() method sets the size in pixels of the <iframe> that contains the player and the destroy() method removes the <iframe>.

June 6, 2012

This update contains the following changes:

  • We have removed the experimental status from the IFrame Player API.

  • The Loading a video player section has been updated to point out that when inserting the <iframe> element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.

    In addition, that section now notes that the insertion of the <iframe> element could affect the layout of your page if the element being replaced has a different display style than the inserted <iframe> element. By default, an <iframe> displays as an inline-block element.

March 30, 2012

This update contains the following changes:

  • The Operations section has been updated to explain that the IFrame API supports a new method, getIframe(), which returns the DOM node for the IFrame embed.

March 26, 2012

This update contains the following changes:

  • The Requirements section has been updated to note the minimum player size.