jQuery簡單的應用YouTube IFrame Player API

8 月 13, 2019 | Javascript, 文 | 0 條留言

當你網頁內嵌了一個 YouTube，通常的做法就是對那個影片點選分享 => 內嵌，就會跑出一條讓你複製貼上的 iframe，像是:

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="https://www.youtube.com/embed/PEr5agHOTcg" width="560"></iframe>

但是假設你希望有人點選撥放這部內嵌影片時，網頁可以做點什麼時，如果我們可以自定義的暫停/播放選項控製播放器，那將會很有趣。所以現在這是一個非常酷的東西像是紀錄點擊，或是 CSS 在播放的時候有些變換，那該怎麼辦呢?那就是 YouTube IFrame Player API 可以辦得到。

YouTube IFrame Player API

YouTube其實有提供一個很好用的工具，叫做IFrame Player API，可以利用這東西來做一些簡單的觸發或是監聽。

首先，我們必須創建具有特定 ID 的<div>（此處為"視頻"），其中腳本將創建嵌入式 <iframe> 視頻播放器。因此，我們無需從 YouTube 網站創建嵌入式 <iframe> 視頻播放器。
onYouTubeIframeAPIReady()：這是預定義的函數，通過該函數首次加載頁面時將調用 API。我們必須使用<div>中提到的\’id\’來調用它（這裡是"視頻"）。
```
player = new YT.Player('video',
```

調用 API 後，它會準備一個具有以下特定參數的對象：

"videoId"：我們從 youtube 視頻頁面鏈接獲得的。例如 – "http://www.youtube.com/watch?v=zZpVlhehzVE" ; ，這裡\’zZpVlhehzVE\’是視頻 ID。
"height"：視頻幀高度。
"width"：視頻幀寬度。
"events"：它定義了您要調用的事件，它具有以下方法：
"onReady"：此事件調用具有要實現的功能（無論您希望如何）的函數。第一次加載視頻播放器時會調用此方法。
"onStateChange"：這個事件對我們非常熟悉，而且我們經常這樣做。這只是暫停/播放/停止功能。當我們通過點擊視頻幀暫停/播放/停止視頻時，正在調用此事件。因此，調用一個函數，我們可以在調用此事件時執行任何操作。

下面簡單的程式範例，播放後跳出一個alert()訊息:

HTML

<div id="video"></div>

Javascript

var player;

var tag = document.createElement('script');
tag.src = https://www.youtube.com/iframe_api; // Take the API address.
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Include the API inside the page.

function onYouTubeIframeAPIReady() {
    player = new YT.Player(video, {
        videoId: zZpVlhehzVE, //你的Youtube 影片ID
        events: {
            onStateChange: function(event) {
                if (event.data == YT.PlayerState.PLAYING) {
                    alert(hello!); //這邊是當開始播放後，需要做的動作
                }
            }
        }
    });
}

Demo 1

Youtube iframe API 使用自訂按鈕 jQuery

在此之前，我們必須確保我們將在支持 HTML5 postMessage 功能的瀏覽器中使用和檢查反射。但幸運的是，除了 IE7 之外，所有現代瀏覽器目前都支持 HTML5 postMessage 功能。

HTML

<div id="video"></div>
<div>
    <button id="pause">Pause</button>
    <button id="play">Play</button>
    <button id="stop">Stop</button>
</div>

Javascript

var player;
var playerSatus;

var tag = document.createElement('script');
tag.src = https://www.youtube.com/iframe_api; // Take the API address.
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Include the API inside the page.

/**
* Integration of onYouTubeIframeAPIReady() functtion.
* - Called while the video is first time loaded.
* - Also place the iframe embaded youtube video in the div with the id 'video'.
*/
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
    videoId: 'zZpVlhehzVE', // Providing the video ID.
    height: '284', // Video height.
    width: '486', // Video width.
    events: {
    'onReady': onPlayerReady, // Initializing the on load function.
    'onStateChange': onPlayerStateChange // Initializing the on change action function.
    }
});
}

/**
* Integration of onPlayerReady() functtion.
* - Called while the video is loaded and let the video automatically play.
*/
function onPlayerReady(event) {
    event.target.playVideo(); // Here we are auto playing the video on loading the page.
}

/**
* Integration of onPlayerReady() functtion.
* - Called while pause/replay/stop the video.
*/
function onPlayerStateChange(event){
    playerSatus = event.data;
}

jQuery 定制功能

暫停：我們已經有了<button>（我們可以設計為暫停按鈕），ID 為"pause"。現在點擊這個，我們將發起一個事件，借助"pauseVideo()"函數（在 API 中預定義）暫停正在運行的視頻。
還有一件事需要注意，我們可以通過全局變量（已定義）"playerSatus"輕鬆跟踪視頻是否正在播放或暫停或停止。在加載視頻作為playerSatus = event.data在onPlayerStateChange功能。所以讓我們看看這將如何發揮作用。
```
/* We are doing the event call using jQuery */
$('#pause').click( function(){
  // Checks for the video is playing or not.
  if (playerSatus == YT.PlayerState.PLAYING) {
      player.pauseVideo(); // 'player' variable we already defined and assigned.
  }
});
```

播放：現在播放視頻，我們將檢查視頻是否已停止，然後我們使用playVideo()函數（在 API 中預定義）。

$('#play').click( function(){
  // Checks for the video is paused or not.
  if (playerSatus == YT.PlayerState.PAUSED) {
      player.playVideo();
  }
});

停止：現在停止視頻，我們將檢查視頻是否正在播放，然後我們使用stopVideo()函數（在 API 中預定義）。

$('#stop').click( function(){
  // Checks for the video is playing or not.
  if (playerSatus == YT.PlayerState.PLAYING) {
      player.stopVideo();
  }
});

Demo2

PausePlayStop

var player;
var player2;
var playerSatus;
var tag = document.createElement('script');
tag.src = https://www.youtube.com/iframe_api; // Take the API address.
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Include the API inside the page.

function onYouTubeIframeAPIReady() {
player = new YT.Player(ytplayer, {
    videoId: zZpVlhehzVE, //你的Youtube 影片ID
    events: {
        onStateChange: function(event) {
            if (event.data == YT.PlayerState.PLAYING) {
                alert(hello!); //這邊是當開始播放後，需要做的動作
            }
        }
    }
});
player2 = new YT.Player('video1', {
    videoId: 'zZpVlhehzVE', // Providing the video ID.
    height: '284', // Video height.
    width: '486', // Video width.
    events: {
    'onReady': onPlayerReady, // Initializing the on load function.
    'onStateChange': onPlayerStateChange // Initializing the on change action function.
    }
});
}

function onPlayerReady(event) {
event.target.playVideo(); // Here we are auto playing the video on loading the page.
}

function onPlayerStateChange(event){
playerSatus = event.data;
}

(function($) {
$(‘#pause’).click( function(){
// Checks for the video is playing or not.
if (playerSatus == YT.PlayerState.PLAYING) {
player2.pauseVideo(); // ‘player’ variable we already defined and assigned.
}
});

$('#play').click( function(){
    // Checks for the video is paused or not.
    if (playerSatus == YT.PlayerState.PAUSED) {
        player2.playVideo();
    }
});

$('#stop').click( function(){
    // Checks for the video is playing or not.
    if (playerSatus == YT.PlayerState.PLAYING) {
        player2.stopVideo();
    }
});

})(jQuery);

Youtube iframe API同時嵌入多個視頻

<div id="ytplayer1"></div>
<div id="ytplayer2"></div>

<script>
  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer1', {
      height: '390',
      width: '640',
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('ytplayer2', {
      height: '390',
      width: '640',
      videoId: '81hdjskilct'
    });
  }
</script>

文章引用:
Youtube 與網頁互動的好幫手
 YouTube API Integration