1.0.0 • Published 1 year ago

nicovideo-iframe-api

Licence

MIT

Version

1.0.0

Deps

Size

39 kB

Vulns

Weekly

Stars

Summary Dependency Versions

ニコニコ動画では、YouTube Player APIのように、動画を埋め込み、操作するためのAPIが公式に提供されていません。しかし、ニコニコ動画の埋め込みプレイヤーは、YouTubeの埋め込みプレイヤーと同じように、JavaScriptで操作することができます。このライブラリは、ニコニコ動画の埋め込みプレイヤーを操作するためのAPIを提供します。ライブラリを使用することで、YouTube Player APIのように、ニコニコ動画の埋め込みプレイヤーを操作することができます。

要件

実行環境であるブラウザはHTML5のpostMessageをサポートするブラウザを使用する必要があります。最新のブラウザはサポートしていますが、Internet Explorer 8以下はサポートしていません。
このAPIを使用するためには、以下のJavaScript関数も実装する必要があります。
- onNicoVideoIframeAPIReady: ページでAPIが使用可能になったときに呼び出される関数

使用例

<!DOCTYPE html>
<html>
<head>
    <title>NicoVideo Iframe API Example</title>
</head>
<body>
    <div id="player"></div>
    <script>
        var player;
        function onNicoVideoIframeAPIReady() {
            player = new NV.Player('player', {
                width: 640,
                height: 360,
                videoId: 'sm9',
                events: {
                    onReady: onReady
                }
            });
        }
        function onReady() {
            player.play();
        }
    </script>
    <script src="https://cdn.jsdelivr.net/gh/mf-Mii/nicovideo-iframe-api@latest/nicovideo-iframe-api.js" defer></script>
</body>
</html>

このサンプルコードは、ニコニコ動画の動画IDがsm9の動画を埋め込み、再生するサンプルコードです。以下に、このサンプルコードの説明を記載します。

このコード内の<div id="player"></div>は、APIが動画プレイヤーを配置する場所を示しています。
このコード内のonNicoVideoIframeAPIReady関数は、APIが使用可能になったときに呼び出される関数です。
NV.Player('player', { ... })は、動画プレイヤーを作成する関数です。
1. 'player'は、動画プレイヤーを配置する場所を、要素のIDで指定しています。
プレイヤーの準備ができたときに、onReady関数が呼び出されます。
player.play()は、動画を再生する関数です。

実際の動作は、こちらで確認できます。

使い方

APIの読み込み

<script src="https://cdn.jsdelivr.net/gh/mf-Mii/nicovideo-iframe-api@latest/nicovideo-iframe-api.js" defer>

動画プレイヤーの読み込み

var player = new NV.Player('<HTML_ID>', {
    width: 640,
    height: 360,
    videoId: 'sm9',
    events: {
        onReady: onReady
    }
});

動画プレイヤーのコンストラクタは次の引数を取ります。

1: <HTML_ID>は動画プレイヤーを配置する場所を指定します。HTMLの要素のIDを指定します。
2: NV.PlayerOption.Optionを指定します。このオブジェクトには以下のプロパティを指定します。
- *width(number): プレイヤーの幅を指定します。
- *height(number): プレイヤーの高さを指定します。
- *videoId(string): 動画IDを指定します。
- playerId(number): プレイヤーのID(数字)を指定します。デフォルトは1です。
- events: イベントハンドラを指定します。このオブジェクトには以下のプロパティを指定します。
  - onReady:(Function): プレイヤーが動画を再生する準備ができたときに呼び出される関数を指定します。
  - onLoadComplete:(Function): プレイヤーの読み込みが完了したときに呼び出される関数を指定します。
  - onPlayerStatusChange:(Function): プレイヤーの状態が変更されたときに呼び出される関数を指定します。
  - onStatusChange:(Function): 動画の状態が変更されたときに呼び出される関数を指定します。
  - onSeekStatusChange:(Function): 動画のシーク状態が変更されたときに呼び出される関数を指定します。
  - onEnterProgrammaticFullScreen:(Function): プログラムでフルスクリーンモードに入ったときに呼び出される関数を指定します。
  - onExitProgrammaticFullScreen:(Function): プログラムでフルスクリーンモードから出たときに呼び出される関数を指定します。