ニコニコ動画のHTML5外部プレイヤーをJavaScriptで操作する

ニコニコ動画の外部プレイヤーはFlashからHTML5に変更されたため、従来の方法では JavaScript による制御が行えなくなりました。

今回は、HTML5版のソースコード内からAPIの実装状況を調べてみたので、その使用方法を紹介します。

IFrame Player の埋め込み

現時点で https には対応していないみたいです。

<iframe src="http://embed.nicovideo.jp/watch/sm9?jsapi=1&playerId=1" id="nicovideoPlayer-1" frameborder="0" allowfullscreen></iframe>

プレイヤーとの通信は全て、window.postMessage によって行います。

イベントの受け取り

window.addEventListener('message', (e) => {
  if (e.origin === 'http://embed.nicovideo.jp') {
    /**
     * e.data.data
     * e.data.eventName
     * e.data.playerId
     * e.data.sourceConnectorType
    **/
  }
});

イベント名 (e.data.eventName)

• loadComplete
  動画の基本的な情報が含まれる。

• playerMetadataChange
  動画の再生時間やバッファなどの更新に合わせて逐次発行される。

  type	e.data.data	description
  undefined or number	currentTime	現在の再生時間
  undefined or number	duration	動画の長さ
  number	maximumBuffered	現在の最大バッファ
  boolean	muted	ミュート
  number	volume	音量

• playerStatusChange

  e.data.data.playerStatus	description
  1	読み込み開始
  2	再生開始
  3	一時停止
  4	再生終了

• error
  エラーが発生した場合に発行される。

プレイヤーの操作

const player1 = document.getElementById('nicovideoPlayer-1');
const origin = 'http://embed.nicovideo.jp';

player1.contentWindow.postMessage(message, origin);

以下が必須プロパティを除いた操作の例です。

{
  eventName: 'play'
}

{
  eventName: 'pause'
}

{
  eventName: 'mute'
  data: {
    mute: true
  }
}

{
  eventName: 'seek'
  data: {
    time: 0
  }
}

{
  eventName: 'volumeChange'
  data: {
    volume: 0.1
  }
}

まとめ

調べながら一通りの機能の操作ができるものを作ってみました。

See the Pen nicovideo html5 embed player api by hayu (@hayu) on CodePen.

現時点でYouTubeや旧版と比べて操作できるAPIはかなり少なく、GUIに無い機能を作ろうとしてもリピート再生や連続再生くらいが限界です。
プレミアム会員でも低品質で再生されてしまうので、今後の機能追加に期待したいです。