メインコンテンツまでスキップ

プレイヤーAPI概要

ミルビィ プレイヤーAPI は JavaScript を用いてミルビィプレイヤーを操作するための機能を提供します。

再生の制御やイベントの監視方法を実例で確認したい場合は、機能別ガイドのプレイヤーAPIで再生を制御するを参照してください。

プレイヤーAPI利用の流れ​

  1. HTMLに取得した埋め込みコードを記述します。
  2. 埋め込みコードに記述されているインスタンスに対してプレイヤーAPIを使用した操作を行うことができます。

サンプルコード​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
  </head>
  <body>
    <!-- 埋め込みコード -->
    <div id="player"></div>
    <script
      src="https://cdn.millvi.com/player/player.js"
      charset="UTF-8"
    >
    </script>
    <script>
      const player = new Millvi.MillviPlayer({
        containerId: 'player',
      });
      player.setContent({ embedKey: '...' });
    </script>
    <!-- 埋め込みコード -->
  </body>
</html>

複数のプレイヤーを貼り付ける際の注意点​

HTMLページ内に複数のミルビィプレイヤー埋め込みコードが含まれている場合、操作対象のミルビィプレイヤーを特定するためにミルビィプレイヤー埋め込みコードに下記の修正が必要となります。

  1. 埋め込みコードのdivタグのidを一意となるものに変更します
  2. containerIdを1.で変更したidに変更します
  3. インスタンス名を一意となるものに変更します

サンプルコード​

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
  </head>
  <body>
    <!-- 埋め込みコード01 -->
    <div id="player01"></div>
    <script
      src="https://cdn.millvi.com/player/player.js"
      charset="UTF-8"
    >
    </script>
    <script>
      const player01 = new Millvi.MillviPlayer({
        containerId: 'player01',
      });
      player01.setContent({ embedKey: '...' });
    </script>
    <!-- 埋め込みコード01 -->

    <!-- 埋め込みコード02 -->
    <div id="player02"></div>
    <script>
      const player02 = new Millvi.MillviPlayer({
        containerId: 'player02',
      });
      player02.setContent({ embedKey: '...' });
    </script>
    <!-- 埋め込みコード02 -->
  </body>
</html>