YouTube Player API

はじめに

サイトにおいてYoutubeの映像や音楽を流すことができる。

通常であれば、Youtubeの[共有]>[埋め込む]で表示されるHTMLコードをサイトページのHTMLに組み込めばよい。これだけでも自動再生と開始位置していなどをURLパラメータに指定することができる。

Youtubeの埋め込み再生動画を切り替えたりするのに、簡単なコードで操作するにはYouTube Player APIを使用する。ここではそのYouTube Player APIについて解説する。

公式リファレンス：https://developers.google.com/youtube/iframe_api_reference

ひな形

簡単なコードとしては以下のようなものになる。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>YouTube Player API</title>

    <script src="https://www.youtube.com/iframe_api"></script>

  </head>

  <body>

<div id="player"></div>

<script>

  var player;

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18' // アクアテラリウム

});

</script>

  </body>

</html>

ここでは、https://www.youtube.com/watch?v=GLOFPP4Ag18 の動画を埋め込んでいる。

headタグの<script src="https://www.youtube.com/iframe_api"></script>で外部ライブラリをロードしている。divタグにid="player"を指定して埋め込んでいる。つぎのscriptタグでプレイヤーの生成を行っている。YT.Playerに埋め込み先タグと幅、高さ、videoIdを指定している。videoIdはYouTubeのURLにおいて、"v="に指定される引数である。

自動再生

ページを開いたときに自動的に再生されるようにコードを追加する。変更するscriptの部分を示す。

<script>

  var player;

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18', // アクアテラリウム

      events: {

        'onReady': onPlayerReady

});

  function onPlayerReady(event) {

    event.target.playVideo();

</script>

onReadyはプレイヤーの準備ができたときに実行されるイベントである。そこでplayVideo()を実行することで、自動再生できることになる。

eventsを無名関数で記述するならば以下のようになる。

      events: {

        'onReady': function(event){ event.target.playVideo(); }

また、アロー関数で記述するならば以下のようになる。

      events: {

        'onReady': event => { event.target.playVideo(); }

これ以降、イベントはアロー関数を使用する。また、後述のplayerVarsを使用することもできる。

繰り返し再生

プレイヤーの状態が変更されると、onStateChangeイベントが実行される。再生が終了したときにこのイベントが発生し、dataプロパティが YT.PlayerState.ENDED のときに、playVideo()を実行することで繰り返し再生を行う。

      events: {

        'onReady': event => { event.target.playVideo(); },

        'onStateChange': event => {

          if (event.data == YT.PlayerState.ENDED) {

            event.target.playVideo();

シークして再生

プレイヤーを何もせずに再生すると、動画の最初から再生される。seekTo()は再生位置を移動させることができる。script部分を示す。

<script>

  var player;

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18', // アクアテラリウム

      events: {

        'onReady': event => { PlayWithSeek(event); },

        'onStateChange': event => {

          if (event.data == YT.PlayerState.ENDED) {

            PlayWithSeek(event);

});

  function PlayWithSeek(event) {

    event.target.playVideo();

    event.target.seekTo(60, true);

</script>

playVideo()の直後にseekTo(60, true);を実行すると、１分のところにシークして再生する。seekTo()の第一引数は秒数、第二引数はバッファリクエストをおこなうならtrueを指定する。再生位置を戻すだけなので、動画の再読み込みは発生しない。また、後述のplayerVarsを使用することもできる。

位置を指定して繰り返し再生

動画の再生を終了する位置を指定し、再生開始位置と終了位置を指定して再生を繰り返す。script部分を示す。

<script>

  var player;

  var op = {

    'videoId': "GLOFPP4Ag18",

    'startSeconds': 60,

    'endSeconds': 70,

    'suggestedQuality': 'small'

};

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18', // アクアテラリウム

      events: {

        'onReady': event => {

          player.cueVideoById(op);

          player.playVideo();

},

        'onStateChange': event => {

          if (event.data == YT.PlayerState.ENDED) {

            player.cueVideoById(op);

          } else if (event.data == YT.PlayerState.CUED) {

            player.playVideo();

});

</script>

この方法の欠点としては、繰り返すたびにロードが発生するところである。

オプションを使用する

playerVarsを使って、再生位置の指定や自動再生などを行うことができる。例を示す。

<script>

  var player;

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18', // アクアテラリウム

      playerVars: {

        controls: 0, // ボタンを出さない

        showinfo: 0, // 動画名などを出さない

        disablekb: 1, // ショートカットキー無効

        rel: 0, // 関連動画出さない

        start: 60, // 動画再生の開始位置

        end: 70, // 動画再生の終了位置

        autoplay: 1, // 自動再生の設定

        loop: 1, // 無効？

        playlist: 'GLOFPP4Ag18-VE' // 無効？

});

</script>

loopはplaylistを一緒に使用できるが、効かないようである。

setTimeoutメソッドを使用した位置を指定して繰り返し再生

終了位置を指定して繰り返しして、なお且つ再ロードされないようにしたいなら、setTimeoutを使用する方法がある。コードを示す。

<script>

  var player = null;

  const kStartTime = 60;

  const kEndTime = 70;

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18', // アクアテラリウム

      events: {

        'onReady': event => { PlayWithSeek(); }

},

      playerVars: {

        controls: 0, // ボタンを出さない

        disablekb: 1, // ショートカットキー無効

        autoplay: 1, // 自動再生の設定

});

  const kPlayTimeMs = (kEndTime-kStartTime) * 1000;

  function PlayWithSeek() {

    player.playVideo();

    player.seekTo(kStartTime, true);

    setTimeout(PlayWithSeek, kPlayTimeMs);

</script>

ボリューム設定とコントローラの自作

ボリューム設定を含めて各コントローラを使いながらYoutubeを制御するページのコードである。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>YouTube Player API</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script src="https://www.youtube.com/iframe_api"></script>

  </head>

  <body>

<div>

<b>Youtubeコントローラ</b><br>

<form>

  <fieldset>

    <legend>曲の設定</legend>

    <label for="idYoutubeId">YoutubeId：</label><input type="text" id="idYoutubeId" value="GLOFPP4Ag18" size="10"><br>

    <input type="checkbox" id="idUseStart" checked>開始秒使用

    <label for="idStart">開始秒：</label><input type="text" id="idStart" value="0" size="10"><br>

    <input type="checkbox" id="idUseEnd" checked>終了秒使用

    <label for="idEnd">終了秒：</label><input type="text" id="idEnd" value="9999" size="10"><br>

    <input type="button" value="設定" onClick="SetSetting()">

  </fieldset>

  <fieldset>

    <legend>コントローラ（再生、停止、音量）</legend>

    <input type="button" value="再生" onClick="Play()">

    <input type="button" value="一時停止" onClick="Pause()">

    <input type="button" value="最初から再生" onClick="PlayFromStart()">

    <input type="button" value="Youtube画面表示/非表示" onClick="ChangeShowYoutube()"><br>

    音量 <input type="button" value="-10" onClick="Volume(-10)">

    <input type="range" id="idVolumeRange" oninput="$('#idVolume').text(this.value); Volume();">

    <input type="button" value="+10" onClick="Volume(10)">

    <label id=idVolume>50</label>

  </fieldset>

</form>

</div>

<div id="player" style="display:block;"></div>

<script>

  var player = null;

  var op = {

    'videoId': "GLOFPP4Ag18",

    'startSeconds': 0,

    'endSeconds': 9999,

    'suggestedQuality': 'small'

};

  function onYouTubeIframeAPIReady() {

    player = new YT.Player('player', {

      height: '360',

      width: '640',

      videoId: 'GLOFPP4Ag18',

      events: {

        'onStateChange': event => {

          if (event.data == YT.PlayerState.ENDED) {

            player.cueVideoById(op);

          } else if (event.data == YT.PlayerState.CUED) {

            player.playVideo();

            Volume();

},

      playerVars: {

        controls: 0, // ボタンを出さない

        showinfo: 0, // 動画名などを出さない

        disablekb: 1, // ショートカットキー無効

        rel: 0, // 関連動画出さない

});

  function SetSetting()

    var startTime = 0;

    if ($('#idUseStart').prop('checked'))

      startTime = $('#idStart').val();

    var endTime = 9999;

    if ($('#idUseEnd').prop('checked'))

      endTime = $('#idEnd').val();

    op = {

      'videoId': $('#idYoutubeId').val(),

      'startSeconds': startTime,

      'endSeconds': endTime,

      'suggestedQuality': 'small'

};

    player.cueVideoById(op);

    Volume();

  function Play()

    player.playVideo();

  function Pause()

    player.pauseVideo();

  function PlayFromStart()

    player.cueVideoById(op);

  function Volume(delta = 0)

    var t = $("#idVolume").text();

    var i = Number(t);

    i += delta;

    if (i < 0) i = 0;

    else if (i > 100) i = 100;

    $("#idVolume").text(i);

    $("#idVolumeRange").val(i);

    player.setVolume(i);

  function ChangeShowYoutube()

    if ($("#player").css("display") == "none") {

      $("#player").css("display", "block");

    else {

      $("#player").css("display", "none");

</script>

<br>

VqxQc5bQ-U4 アクアテラリウム (droplamp's chill Remix)<br>

ccQ2igjj6cE The Girls Are Alright!<br>

_tAX3qrLK_I Another Character song1 しずかに<br>

ci2Q5BTnvGw ハレ晴レユカイ

  </body>

</html>

終了秒について、9999以上は最後まで再生するものとすると、シークを戻す目的で使用するplayer.cueVideoById(op);の部分は以下のようにすると、終了秒を途中で終わる場合は処理を軽くすることができる。

    if (op.endSeconds >= 9999)

      player.seekTo(op.startSeconds, true);

    else {

      player.cueVideoById(op);

Google Sites

Report abuse