ニコニコ動画の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>
type URL parameters description
number jsapi 1 を指定をすることによりAPIが使用可能になる。
string (optional) playerId プレイヤーにIDを割り振ることができる。

プレイヤーとの通信は全て、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);
type message object description
string (optional) playerId 指定していれば必須
number sourceConnectorType 1
string eventName イベント名
object (optional) data リクエスト内容。イベントによっては必須

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

{
  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に無い機能を作ろうとしてもリピート再生や連続再生くらいが限界です。
プレミアム会員でも低品質で再生されてしまうので、今後の機能追加に期待したいです。