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