j3iiifn’s blog

ネットワーク、インフラ、プログラミングについての備忘録

Youtube埋め込みプレイヤーでプレイリスト内の特定の動画を最初に再生させる方法

YouTube IFrame Player APIを使うとYouTube動画プレイヤーをWebサイトに埋め込める。 プレイリストを埋め込む場合、デフォルトではプレイリストの先頭(index=0)の動画から順に再生される。 先頭の動画ではなく、プレイリスト内にある特定の動画を最初に再生させる方法を調べたのでメモっておく。

なお、YouTube IFrame Player APIの大まかな使い方は公式リファレンスのHTMLサンプルを参照されたい。 https://developers.google.com/youtube/iframe_api_reference?hl=ja#Getting_Started

プレイヤーにプレイリスト内の特定の動画を読み込ませるには player.playVideoAt(index:Number) 関数を使えばよい。 この関数の引数はindexなので、再生させたい動画がプレイリストの何番目にあるのかを調べなければならない。

プレイリストの中身(動画IDの配列)は player.playerInfo.playlist に格納されている。

> player.playerInfo.playlist
<- (45) ["dvSf14Vdpfs", "zQDs68aLUJU", "nVST59RVUFI", "Uv1DSH0H1Cs", "LVHHxMInpbQ",..., "c1hzbBFIno4"]

なので、再生させたい動画のindexを調べるコードは次のようになる。

const FIRST_VIDEO_ID = 'xxxxxxxxx';
player.playerInfo.playlist.findIndex((element) => element == FIRST_VIDEO_ID)

player.playVideoAt() 関数はプレイヤーの準備が終わった後に呼び出す必要がある。 プレイヤーの準備が完了したら onReady イベントが発生する。 このイベントが発生したときに呼び出す関数は、プレイヤーのコンストラクタで指定しておかなければならない。 次のように書くと、onReady イベントが発生したときに onPlayerReady 関数が呼ばれるようになる。

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    ...
    events: {
      'onReady': onPlayerReady
    }
  });
}

onPlayerReady 関数では、再生させたい動画のindexを取得し、それを playVideoAt() 関数の引数に与える。

function onPlayerReady(event) {
  const index = event.target.playerInfo.playlist.findIndex((element) => element == FIRST_VIDEO_ID);
  event.target.playVideoAt(index);
}

サンプルコードはこちら↓

github.com