RS_YoutubePlayer.js

//================================================================
// RS_YoutubePlayer.js
// ---------------------------------------------------------------
// The MIT License
// Copyright (c) 2016 biud436
// ---------------------------------------------------------------
// Free for commercial and non commercial use.
//================================================================
/*:
 * @target MZ
 * @plugindesc This plugin allows you to start playback of the YouTube video <RS_YoutubePlayer>
 * @author biud436
 * @url https://biud436.tistory.com
 *
 * @param Video Quality
 * @desc highres, hd1080, hd720, large, medium, small
 * default : hd720
 * @default hd720
 * @type select
 * @option highres
 * @option hd1080
 * @option hd720
 * @option large
 * @option medium
 * @option small
 *
 * @param Size
 * @type select
 * @desc Specify the size of the default player.
 * @default Normal
 * @option Normal (560 * 315px)
 * @value Normal
 * @option Fullscreen
 * @value Fullscreen
 *
 * @param Looping
 * @type boolean
 * @desc Sets the video to loop or not.
 * @default false
 * @on Loop always
 * @off Playback once
 *
 * @help
 * In general, In Android Chrome and Mobile Safari, It doesn't automatically
 * start playback. and you can stop the video by clicking around the YouTube video.
 * This plugin will automatically end the video playback if you watches
 * the video until the end.
 *
 * =============================================================================
 * Script Calls
 * =============================================================================
 * Graphics.playYoutube("https://www.youtube.com/watch?v=C4ze-KCSxQY");
 * if(YTPlayer.isPlaying()) YTPlayer.stopVideo();
 * YTPlayer.isPaused();
 * YTPlayer.isBuffering();
 * YTPlayer.isEnded();
 *
 * =============================================================================
 * Change Log
 * =============================================================================
 * 2016.05.08 (v1.0.0) - First Release
 * 2016.05.09 (v1.0.1) - Added Error Handler
 * 2016.05.12 (v1.0.2) - Fixed a function that parses a URL.
 * 2016.07.04 (v1.0.3) - Fixed a few logic about the range were converted to Rectangular object.
 * 2016.10.06 (v1.0.4) - Added Canvas Filters.
 * 2016.12.10 (v1.0.5) :
 * - Added a plugin parameter about video quality settings.
 * - Added the ability to play YouTube videos from a specified time.
 * 2017.08.31 (v1.0.6) :
 * - Added a feature that the video size sets up with a fullscreen mode.
 * - Added a feature that can set the video to loop
 * 2018.01.08 (v1.0.7) :
 * - Now that The YouTube iframe will be newly created every times when playing back the video.
 * - Fixed the bug that is not available the function called YTPlayer.isEnded();
 * 2022.04.08 (v1.1.0) :
 * It is now possible to play the video as a fullscreen mode only.
 * if you want to use previous version,
 * Try to download this, and replace the RS_YoutubePlayer.js in the plugin folder.
 * link : https://raw.githubusercontent.com/biud436/MZ/1a58ef44540172f675d162f32d2e11ea56fb7455/RS_YoutubePlayer.js
 * 2022.04.09 (v1.1.1) :
 * - fixed the bug that is not working escape key after adding this plugin.
 *
 * @command play
 * @desc
 *
 * @arg src
 * @type string
 * @desc Specify the youtube url
 * @default https://www.youtube.com/watch?v=C4ze-KCSxQY
 *
 * @command stop
 * @desc
 */
/*:ko
 * @target MZ
 * @plugindesc 유튜브 플레이어 <RS_YoutubePlayer>
 * @author 러닝은빛(biud436)
 * @url biud436.tistory.com
 *
 * @param Video Quality
 * @desc 비디오 품질(화질)을 설정합니다.
 * default : hd720
 * @default hd720
 * @type select
 * @option highres
 * @option hd1080
 * @option hd720
 * @option large
 * @option medium
 * @option small
 *
 * @param Size
 * @type select
 * @desc 기본 유튜브 플레이어의 크기를 지정합니다.
 * @default Normal
 * @option 보통 (560 * 315px)
 * @value Normal
 * @option 전체 화면
 * @value Fullscreen
 *
 * @param Looping
 * @type boolean
 * @desc 동영상 반복 재생 여부를 지정합니다
 * @default false
 * @on 루프로 설정
 * @off 한 번만 재생
 *
 * @help
 * 안드로이드 '크롬'과 모바일 '사파리'에서는 동영상이 자동으로 재생되지 않습니다.
 * 유튜브 플레이어를 종료하고자 한다면 동영상 영역의 바깥 쪽을 클릭하시거나,
 * 동영상이 끝날 때 까지 기다려주세요.
 *
 * =============================================================================
 * 스크립트 명령
 * =============================================================================
 * 유튜브 동영상을 '스크립트 커맨드'로 재생하려면 다음을 호출하세요.
 * Graphics.playYoutube("https://www.youtube.com/watch?v=C4ze-KCSxQY");
 *
 * 재생 중인 유튜브 동영상의 상태를 유튜브 API로 확인할 수 있습니다.
 * 직접 접근하려면 YTPlayer 전역 객체를 사용하세요.
 *
 * if(YTPlayer.isPlaying()) YTPlayer.stopVideo();
 * YTPlayer.isPaused();
 * YTPlayer.isBuffering();
 * YTPlayer.isEnded();
 *
 * =============================================================================
 * 버전 로그
 * =============================================================================
 * 2016.05.08 (v1.0.0) - First Release
 * 2016.05.09 (v1.0.1) - Added Error Handler
 * 2016.05.12 (v1.0.2) - Fixed a function that parses a URL.
 * 2016.07.04 (v1.0.3) - Fixed a few logic about the range were converted to Rectangular object.
 * 2016.10.06 (v1.0.4) - Added Canvas Filters.
 * 2016.12.10 (v1.0.5) :
 * - Added a plugin parameter about video quality settings.
 * - Added the ability to play YouTube videos from a specified time.
 * 2017.08.31 (v1.0.6) :
 * - Added a feature that the video size sets up with a fullscreen mode.
 * - Added a feature that can set the video to loop
 * 2018.01.08 (v1.0.7) :
 * - Now that The YouTube iframe will be newly created every times when playing back the video.
 * - Fixed the bug that is not available the function called YTPlayer.isEnded();
 * 2022.04.08 (v1.1.0) :
 * It is now possible to play the video as a fullscreen mode only.
 * if you want to use previous version,
 * Try to download this, and replace the RS_YoutubePlayer.js in the plugin folder.
 * link : https://raw.githubusercontent.com/biud436/MZ/1a58ef44540172f675d162f32d2e11ea56fb7455/RS_YoutubePlayer.js
 * 2022.04.09 (v1.1.1) :
 * - fixed the bug that is not working escape key after adding this plugin.
 *
 * @command play
 * @desc
 *
 * @arg src
 * @type string
 * @desc Specify the youtube url
 * @default https://www.youtube.com/watch?v=C4ze-KCSxQY
 *
 * @command stop
 * @desc
 */
/*:ja
 * @target MZ
 * @plugindesc ユーチューブプレイヤーです。<RS_YoutubePlayer>
 * @author biud436
 * @url biud436.tistory.com
 *
 * @param Video Quality
 * @desc 動画の品質を設定します。
 * default : hd720
 * @default hd720
 * @type select
 * @option highres
 * @option hd1080
 * @option hd720
 * @option large
 * @option medium
 * @option small
 *
 * @param Size
 * @type select
 * @desc ユーチューブプレーヤーの動画の大きさを指定します。
 * @default Normal
 * @option 普通 (560 * 315px)
 * @value Normal
 * @option フルスクリーンモード
 * @value Fullscreen
 *
 * @param Looping
 * @type boolean
 * @desc 動画反復再生するかどうかを指定してください。
 * @default false
 * @on 繰り返し再生
 * @off 一度再生
 *
 * @help
 * アンドロイドクロムとモバイルのサファリでは、自動で動画が再生されません。
 * ユーチューブプレーヤーを終了するには、動画領域の外側をクリックすればいいです
 * それとも動画が終わるまで待ってください。
 *
 * =============================================================================
 * スクリプトコマンドについて
 * =============================================================================
 * Graphics.playYoutube("YOUTUBE_URL"); // ユーチューブ動画を再生します。
 *
 * 再生中のユーチューブ動画の状態をで確認できます。
 *
 * if(YTPlayer.isPlaying()) YTPlayer.stopVideo();
 * YTPlayer.isPaused();
 * YTPlayer.isBuffering();
 * YTPlayer.isEnded();
 *
 * =============================================================================
 * Version
 * =============================================================================
 * 2016.05.08 (v1.0.0) - First Release
 * 2016.05.09 (v1.0.1) - Added Error Handler
 * 2016.05.12 (v1.0.2) - Fixed a function that parses a URL.
 * 2016.07.04 (v1.0.3) - Fixed a few logic about the range were converted to Rectangular object.
 * 2016.10.06 (v1.0.4) - Added Canvas Filters.
 * 2016.12.10 (v1.0.5) :
 * - Added a plugin parameter about video quality settings.
 * - Added the ability to play YouTube videos from a specified time.
 * 2017.08.31 (v1.0.6) :
 * - Added a feature that the video size sets up with a fullscreen mode.
 * - Added a feature that can set the video to loop
 * 2018.01.08 (v1.0.7) :
 * - Now that The YouTube iframe will be newly created every times when playing back the video.
 * - Fixed the bug that is not available the function called YTPlayer.isEnded();
 * 2022.04.08 (v1.1.0) :
 * It is now possible to play the video as a fullscreen mode only.
 * if you want to use previous version,
 * Try to download this, and replace the RS_YoutubePlayer.js in the plugin folder.
 * link : https://raw.githubusercontent.com/biud436/MZ/1a58ef44540172f675d162f32d2e11ea56fb7455/RS_YoutubePlayer.js
 * 2022.04.09 (v1.1.1) :
 * - fixed the bug that is not working escape key after adding this plugin.
 *
 * @command play
 * @desc
 *
 * @arg src
 * @type string
 * @desc Specify the youtube url
 * @default https://www.youtube.com/watch?v=C4ze-KCSxQY
 *
 * @command stop
 * @desc
 */

var Imported = Imported || {};
Imported.RS_YoutubePlayer = true;

var player;
var RS = RS || {};
RS.YoutubePlayer = RS.YoutubePlayer || {};
RS.YoutubePlayer.Params = RS.YoutubePlayer.Params || {};

window.onPlayerReady = function (event) {
  var target = event.target;
  target.playVideo();
};

window.onPlayerError = function (event) {
  var errorLog = "";
  switch (event.data) {
    case 2:
      // 요청에 잘못된 매개변수 값이 포함되어 있습니다. 예를 들어 11자리가 아닌 동영상 ID를 지정하거나
      // 동영상 ID에 느낌표 또는 별표와 같은 잘못된 문자가 포함된 경우에 이 오류가 발생합니다.
      errorLog += "Error Code : 2" + "\r\n";
      errorLog +=
        "The request contains an invalid parameter value. For example, " +
        "\r\n";
      errorLog +=
        "this error occurs if you specify a video ID that does not have 11 characters, " +
        "\r\n";
      errorLog += "or if the video ID contains invalid characters, " + "\r\n";
      errorLog += "such as exclamation points or asterisks.      " + "\r\n";
      break;
    case 5:
      // 요청한 콘텐츠는 HTML5플레이어에서 재생할 수 없는, 또는 HTML5플레이어에 대한 별도의 에러가 발생했습니다.
      errorLog += "Error Code : 5" + "\r\n";
      errorLog +=
        " The requested content cannot be played in an HTML5 player" + "\r\n";
      errorLog +=
        "or another error related to the HTML5 player has occurred." + "\r\n";
      break;
    case 100:
      // 요청한 동영상을 찾을 수 없습니다.
      // 어떠한 이유로든 동영상이 삭제되었거나 비공개로 표시된 경우에 이 오류가 발생합니다.
      errorLog += "Error Code : 100" + "\r\n";
      errorLog += "The video requested was not found. " + "\r\n";
      errorLog +=
        "This error occurs when a video has been removed (for any reason) " +
        "\r\n";
      errorLog += "or has been marked as private." + "\r\n";
      break;
    case 101:
    case 150:
      // 요청한 동영상의 소유자가 내장 플레이어에서 동영상을 재생하는 것을 허용하지 않습니다.
      errorLog += "Error Code : 101 or 150" + "\r\n";
      errorLog +=
        "The owner of the requested video does not allow it to be played in embedded players.";
      break;
  }
  YTPlayer.stopVideo();
  window.alert(errorLog);
};

window.onPlayerStateChange = function (event) {
  switch (event.data) {
    case YT.PlayerState.ENDED: // 종료됨
      console.log("Video has ended.");
      YTPlayer._status = YT.PlayerState.ENDED;
      if (RS.YoutubePlayer.Params.isLooping) {
        YTPlayer.callPlayer("playVideo", []);
        YTPlayer.callPlayer("seekTo", [0, true]);
      } else {
        YTPlayer.removeAllElement();
      }
      break;
    case YT.PlayerState.PLAYING: // 재생 중
      console.log("Video is playing.");
      YTPlayer._status = YT.PlayerState.PLAYING;
      break;
    case YT.PlayerState.PAUSED: // 일시 중지
      console.log("Video is paused.");
      YTPlayer._status = YT.PlayerState.PAUSED;
      break;
    case YT.PlayerState.BUFFERING: // 버퍼링
      console.log("Video is buffering.");
      YTPlayer._status = YT.PlayerState.BUFFERING;
      break;
    case YT.PlayerState.CUED: // 동영상 신호
      console.log("Video is cued.");
      YTPlayer._status = YT.PlayerState.CUED;
      break;
    default:
      // 시작 전
      console.log("Unrecognized state.");
      break;
  }
};

//----------------------------------------------------------------------------
// Youtube Event Handler
//
//
window.onYouTubeIframeAPIReady = function () {
  player = new YT.Player("ytplayer-iframe", {
    height: "560",
    width: "315",
    videoId: "BIbpYySZ-2Q",
    fs: 1,
    autoplay: 1,
    enablejsapi: 1,
    rel: 1,
    showinfo: 0,
    playsinline: 0,
    controls: 0,
    autohide: 1,
    loop: 1,
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
      onError: onPlayerError,
    },
  });
};

(() => {
  var parameters = $plugins.filter(function (i) {
    return i.description.contains("<RS_YoutubePlayer>");
  });

  const pluginName = parameters.length > 0 && parameters[0].name;
  parameters = parameters.length > 0 && parameters[0].parameters;

  var quality = parameters["Video Quality"] || "hd720";

  RS.YoutubePlayer.Params.viewSize = parameters["Size"] || "Normal";
  RS.YoutubePlayer.Params.isLooping = Boolean(parameters["Looping"] === "true");

  class YTPlayer {
    static initialize() {
      "use strict";
      var tw = window.outerWidth - window.innerWidth;
      var th = window.outerHeight - window.innerHeight;
      var viewMode = RS.YoutubePlayer.Params.viewSize;
      this._init = false;
      this._status = -1;
      this._visibility = true;

      /**
       * @type {HTMLDivElement}
       */
      this._ytPlayer = document.createElement("div");
      this._ytPlayer.id = "ytplayer";
      this._ytPlayer.style.width = "100%";
      this._ytPlayer.style.height = "100%";
      this._ytPlayer.style.padding = "0";
      this._ytPlayer.style.margin = "0";
      this._ytPlayer.style.overflow = "hidden";
      this._ytPlayer.style.zIndex = "1000";
      this._ytPlayer.style.display = "none";

      Graphics._centerElement(this._ytPlayer);

      document.body.appendChild(this._ytPlayer);
      this._tag = document.createElement("script");
      this._tag.src = "https://www.youtube.com/iframe_api";
      this.createIframe();
    }

    static createIframe() {
      if (this._iframe) {
        this._ytPlayer.removeChild(this._iframe);
      }
      var viewMode = RS.YoutubePlayer.Params.viewSize;
      this._iframe = document.createElement("iframe");
      this._iframe.id = "ytplayer-iframe";
      this._iframe.width = "100%";
      this._iframe.height = "100%";
      this._iframe.style.opacity = "0";
      this._iframe.style.zIndex = "0";
      this._iframe.allowfullscreen = true;
      Graphics._centerElement(this._iframe);
      this._ytPlayer.appendChild(this._iframe);
    }

    static preVideo(src) {
      if (src) {
        this._iframe.src =
          "https://www.youtube.com/embed/%1?enablejsapi=1&version=3".format(
            src
          );
      }
      this._iframe.style.opacity = "1";
      this._iframe.style.zIndex = "60";
      if (!this._init) {
        this._firstScriptTag = document.getElementsByTagName("script")[0];
        this._firstScriptTag.parentNode.insertBefore(
          this._tag,
          this._firstScriptTag
        );
        this._init = true;
      } else {
        window.onYouTubeIframeAPIReady();
      }
    }

    static playVideo(src) {
      this.createIframe();
      this.preVideo(src);

      if (this._ytPlayer) {
        this._ytPlayer.style.display = "block";
      }
      Graphics._canvas.style.opacity = "0.5";
      if ($gamePlayer) $gamePlayer.lock();
    }

    static stopVideo() {
      if (!this._iframe) this.createIframe();
      this._iframe.style.opacity = "0";
      this._iframe.style.zIndex = "0";
      Graphics._canvas.style.opacity = "1.0";
      if (this._ytPlayer) {
        this._ytPlayer.style.display = "none";
      }
      this.callPlayer("stopVideo");
      if ($gamePlayer) $gamePlayer.unlock();
    }

    static removeAllElement() {
      this.stopVideo();
    }

    static callPlayer(func, args) {
      if (!this._iframe) return;
      var frame_id = "ytplayer-iframe";
      var src = this._iframe.src;
      if (src.indexOf("youtube.com/embed") != -1) {
        this._iframe.contentWindow.postMessage(
          JSON.stringify({
            event: "command",
            func: func,
            args: args || [],
            id: frame_id,
          }),
          "*"
        );
      }
    }

    static isOnPlayer() {
      if (!this._iframe) return false;
      if (!this._iframe.contentWindow) return false;
      return true;
    }

    // Checks whether the YoutubePlayer is playing.
    static isPlaying() {
      if (this._status === YT.PlayerState.PLAYING) {
        return true;
      }
      return false;
    }

    static isPaused() {
      if (this._status === YT.PlayerState.PAUSED) {
        return true;
      }
      return false;
    }

    static isBuffering() {
      if (this._status === YT.PlayerState.BUFFERING) {
        return true;
      }
      return false;
    }

    static isEnded() {
      if (
        this._status === YT.PlayerState.ENDED ||
        this._status === YT.PlayerState.CUED
      ) {
        return true;
      }
      return false;
    }

    static getRect() {
      var w, h, gw, gh, x1, x2, y1, y2;
      w = 560 / 2;
      h = 315 / 2;
      gw = Graphics.width / 2;
      gh = Graphics.height / 2;
      x1 = gw - w;
      x2 = gw + w;
      y1 = gh - h;
      y2 = gh + h;
      this._boundRect.x = x1;
      this._boundRect.y = y1;
      this._boundRect.width = w;
      this._boundRect.height = h;
      return this._boundRect;
    }

    static isTouched() {
      var x = TouchInput.x;
      var y = TouchInput.y;
      var rect = this.getRect();
      return rect.contains(x, y);
    }

    static urlUtils(src) {
      const url = new URL(src);
      const urlParams = {};
      url.search
        .substring(1)
        .split("&")
        .map((i) => i.split("="))
        .forEach((e, i, a) => {
          urlParams[e[0]] = e[1];
        });

      if (src.match(/(?:http|https)+(?:\:\/\/youtu.be\/)+(.*)/gi)) {
        urlParams["v"] = String(RegExp.$1);
      }

      return urlParams;
    }
  }

  YTPlayer._boundRect = new Rectangle(0, 0, 1, 1);

  window.YTPlayer = YTPlayer;

  //----------------------------------------------------------------------------
  // Graphics
  //
  //
  const alias_Graphics_createAllElements = Graphics._createAllElements;
  Graphics._createAllElements = function () {
    alias_Graphics_createAllElements.call(this);
    YTPlayer.initialize();
  };

  Graphics.playYoutube = function (src) {
    var lastStep;
    var params = YTPlayer.urlUtils(src);
    var url = params["v"] || "BIbpYySZ-2Q";
    var startSecond = Number(params["t"]) || 0;
    YTPlayer.playVideo(url);
    lastStep = setInterval(() => {
      YTPlayer.callPlayer("playVideo");
      YTPlayer.callPlayer("setLoop", [true]);
      YTPlayer.callPlayer("setPlaybackQuality", [quality]);
      YTPlayer.callPlayer("seekTo", [startSecond, true]);
      if (YTPlayer.isOnPlayer()) {
        clearInterval(lastStep);
      }
    }, 2000);
  };

  PluginManager.registerCommand(pluginName, "play", (arg) => {
    const src = arg.src;
    setTimeout(() => Graphics.playYoutube(src), 20);
    if (SceneManager._scene instanceof Scene_Map) {
      $gameMap._interpreter.setWaitMode("video");
    }
  });

  PluginManager.registerCommand(pluginName, "stop", (arg) => {
    if (YTPlayer.isPlaying()) YTPlayer.stopVideo();
  });

  const alias_Game_Player_initMembers = Game_Player.prototype.initMembers;
  Game_Player.prototype.initMembers = function () {
    alias_Game_Player_initMembers.call(this);
    this._locked = false;
    this._prelockDirection = 2;
  };

  Game_Player.prototype.lock = function () {
    if (!this._locked) {
      this._prelockDirection = this.direction();
      this._locked = true;
    }
  };

  Game_Player.prototype.unlock = function () {
    if (this._locked) {
      this._locked = false;
      this.setDirection(this._prelockDirection);
    }
  };

  const alias_Game_Player_canMove = Game_Player.prototype.canMove;
  Game_Player.prototype.canMove = function () {
    if (this._locked) {
      return false;
    }
    return alias_Game_Player_canMove.call(this);
  };

  const alias_Scene_Map_update = Scene_Map.prototype.update;
  Scene_Map.prototype.update = function () {
    alias_Scene_Map_update.call(this);
    this.checkEscapeToYoutube();
  };

  Scene_Map.prototype.checkEscapeToYoutube = function () {
    if (TouchInput.isTriggered()) {
      if (!YTPlayer.isTouched() && YTPlayer._status > 0) {
        YTPlayer.stopVideo();
      }
    }
  };

  Graphics._isVideoVisible = function () {
    var youtubePlayer = document.getElementById("ytplayer-iframe");
    return youtubePlayer && youtubePlayer.style.opacity > 0;
  };

  window.addEventListener("keydown", (ev) => {
    // Checks escape key on Macos or Windows.
    if (ev.keyCode === 27 && Graphics._isVideoVisible()) {
      YTPlayer.removeAllElement();
      Input.clear();
      ev.preventDefault();
    }
  });
})();