Jiro Laboratory

C#、ASP.NET、JavaScript、Androidとか

YouTube Player API を使った動画の再生

YouTube Player API を使うと JavaScriptYoutubeプレイヤーの操作を行うことができます。
動画の再生に必要な最小限のコードは以下になります。

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'M7lc1UVf-VE', // Youtube動画のID
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    player.playVideo(); // 再生を開始
  }
</script>
プレイヤー作成時のパラメータ
  • width(数値) – 動画プレーヤーの幅。デフォルト値は 640
  • height(数値) – 動画プレーヤーの高さ。デフォルト値は 390
  • videoId(文字列) – Youtube動画のID
  • playerVars(オブジェクト) – プレーヤーのカスタマイズに使うパラメータ(後述)
  • events(オブジェクト) – オブジェクトのこのプロパティは、API が起動するイベントと、これらのイベントが発生したときに API が呼び出す関数(イベント リスナー)を識別します。
イベントの種類
  • onReady – プレーヤーが読み込みを完了し、API 呼び出しの受信を開始する準備ができると起動します。
  • onStateChange – プレーヤーの状態が変わると起動します。
  • onPlaybackQualityChange – 動画の再生画質が変わると起動します。
  • onPlaybackRateChange – 動画の再生速度が変わると起動します。
  • onError – プレーヤーでエラーが発生すると起動します。
playerVars に指定できるパラメータ

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ja
playerVars を使った例。

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: 1280,
      height: 720,
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        'autoplay': 1, // 自動再生
        'start': 10, // 00:10から開始
      },
    });
  }
</script>