メインコンテンツへスキップ

millvi プレイヤーAPI クイックスタートガイド

  • 更新

プレイヤーAPIとは

millviプレイヤーAPIを使うことで、JavaScriptによりmillviプレイヤーで再生、シーク等の操作が可能になります。

目次

基本的な使い方

  1. プレイヤー埋め込み
  2. イベントハンドラの設定

実装例

  1. 実装例—プレイヤーの再生状態を取得する
  2. 実装例—プレイヤーの再生状態を変更する
  3. 実装例—プレイヤーの設定を変更する
  4. 実装例—プレイヤーの再生状態を受けて、処理を実行する

プレイヤー埋め込み

ページ上に埋め込みコードを貼り、プレイヤーを設置します。

プレイヤーがページ上に複数個ある場合は、各プレイヤーの埋め込みコードで下記の通り別個のEviry.Player.extidを指定してください。

  <script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.extid="player1";Eviry.Player.embedkey=エンベッドキー;</script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>

イベントハンドラの設定

プレイヤーがロードされて操作可能になったときにコールバック関数を実行するEviry.Player.ready(callback)を記述します。

プレイヤーが複数個ある場合は、第2引数にプレイヤーのextidを与えEviry.Player.ready(callback, extid)としてください。

実装例—プレイヤーの再生状態を取得する

この例ではmillviplayer.getVideoID()とmillviplayer.getCurrentPosition()によりプレイヤーの下に動画のコンテンツIDと現在の再生時間を表示させます。

Eviry.Player.ready()に渡すコールバック関数内に再生位置、コンテンツIDを更新させる処理を記述します。

プレイヤー数が1の場合

<html>
<head></head>
<body>
  <h2>その1</h2>
  <script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.embedkey=エンベッドキー;</script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
  <div>
    <div>
      動画 ID:<span id="videoid"></span>
    </div>
    <div>
      再生時間:<span id="currentposition"></span>
    </div>
  </div>
  <script type="text/javascript">
    Eviry.Player.ready(function (millviplayer) {
      if (millviplayer) {
        function OnRefreshMillviInfo() {
          document.getElementById("videoid").innerHTML = millviplayer.getVideoID();
          document.getElementById("currentposition").innerHTML = millviplayer.getCurrentPosition();
        }
        setInterval(OnRefreshMillviInfo,100);
      } else {
          alert("ミルビィプレイヤーが見つかりませんでした。");
      }
    });
  </script>
</body>
</html>

プレイヤーが2個以上ある場合

プレイヤーが２個以上ある場合、埋め込みコードでEviry.Player.extidを指定することによりページ中のプレイヤーに任意のIDを定義する必要があります(太線部)。その後、Eviry.Player.readyの第2引数に指定したIDを渡すことで操作対象のmillviプレイヤーを特定します(下線部)。

<html>
<head></head>
<body>
  <h2>その1</h2>
  <script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.extid="player1";Eviry.Player.embedkey=エンベッドキー１;</script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
  <div>
    <div>
      動画 ID:<span id="videoid-player1"></span>
    </div>
    <div>
      再生時間:<span id="currentposition-player1"></span>
    </div>
  </div>
  <hr>
  <h2>その2</h2>
  <script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.extid="player2";Eviry.Player.embedkey=エンベッドキー２;</script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>    <div>
      動画 ID:<span id="videoid-player2"></span>
    </div>
    <div>
      再生時間:<span id="currentposition-player2"></span>
    </div>
  </div>
  <script type="text/javascript">
    function overReady(extid){
      Eviry.Player.ready(function(millviplayer){
        if (millviplayer) {
          function OnRefreshMillviInfo() {
            id_video="videoid"+"-"+extid;
            document.getElementById(id_video).innerHTML = millviplayer.getVideoID();
            id_position="currentposition"+"-"+extid;
            document.getElementById(id_position).innerHTML = millviplayer.getCurrentPosition();
          }
          setInterval(OnRefreshMillviInfo,100);
        } else {
            alert("ミルビィプレイヤーが見つかりませんでした。");
        }        
      },extid);
    }

    overReady("player1");
    overReady("player2");
  </script>
</body>
</html>

実装例—プレイヤーの再生状態を変更する

millviPlayer.setCurrentPositionによりボタンクリックにより再生中の動画を30秒地点までシークします。

<html>
<head></head>
<body>
  <script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.embedkey=エンベッドキー;</script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
  <input type="button" value="30秒地点に移動" id="btn_30">
  <script type="text/javascript">
    Eviry.Player.ready(function (millviplayer) {
      if (millviplayer) {
        document.getElementById("btn_30").addEventListener("click", function(){
          millviplayer.setCurrentPosition(30);
        }, false);
      } else {
          alert("ミルビィプレイヤーが見つかりませんでした。");
      }
    });
  </script>
</body>
</html>

実装例—プレイヤーの設定を変更する

埋め込みコード部分の変更により、表示されるプレイヤーのオプションを変更することができます。この例ではEviry.Player.seekableの設定によりシークを不可能にしています。

<html>
<head></head>
<body>
  <script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.embedkey=エンベッドキー;
    Eviry.Player.seekable=0;
  </script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
  <div>
    動画 ID:<span id="videoid"></span>
  </div>
  <script type="text/javascript">
    Eviry.Player.ready(function (millviplayer) {
      if (millviplayer) {
        document.getElementById("videoid").innerHTML = millviplayer.getVideoID();
      } else {
          alert("ミルビィプレイヤーが見つかりませんでした。");
      }
    });
  </script>
</body>
</html>

実装例—プレイヤーの再生状態を受けて、処理を実行する

埋め込みコード部分では再生開始や一時停止などを検知するイベントリスナーEviry.Player.eventListnersを登録することができます。

プレイヤーのイベントリスナーに一時停止するとspan#status_pausedに○を1つ追記するという処理を追加した例です。

<html>
<head></head>
<body>
  <script type="text/javascript">
    var Eviry=Eviry||{};
    Eviry.Player||(Eviry.Player={});
    Eviry.Player.embedkey=エンベッドキー;
    Eviry.Player.eventListeners = {
      "paused": function(){
        document.getElementById("status_paused").innerHTML += "○";
      }
    };
  </script>
  <script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
  <div>
    動画 ID:<span id="videoid"></span>
  </div>
  <div>
    ポーズされた回数<span id="status_paused"></span>
  </div>
  <div>
  <script type="text/javascript">
    Eviry.Player.ready(function (millviplayer) {
      if (millviplayer) {
        function OnRefreshMillviInfo() {
          document.getElementById("videoid").innerHTML = millviplayer.getVideoID();
        }
        setInterval(OnRefreshMillviInfo,100);
      } else {
          alert("ミルビィプレイヤーが見つかりませんでした。");
      }
    });
  </script>
</body>
</html>
この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています
ページの先頭へ戻る

関連記事