スタートガイド

インストール

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください：

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用します：

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-mux-player` plugin in my project.

手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください：

bun add @capgo/capacitor-mux-player
bunx cap sync

インポート

import { MuxPlayer } from '@capgo/capacitor-mux-player';

クイックスタート

import { MuxPlayer } from '@capgo/capacitor-mux-player';

const { active } = await MuxPlayer.isActive();
if (active) return;
await MuxPlayer.play({
  playbackId: 'YOUR_PLAYBACK_ID',
});

例：署名付き再生

プラグインのREADMEに記載されている通り、DRMや署名付きポリシー用にバックエンドで生成した再生トークンを渡します。

よくある落とし穴

• 単一プレイヤー: 確認 isActive() 呼び出す前に play() を再度呼び出してください。
• クリーンアップの破棄: その後WebView内でビデオ再生を再開する必要がある場合は、破棄をリッスンしてください。
• トークンの期限切れ: 長時間のセッションになる前に、サーバー側で署名済みJWTをリフレッシュしてください。

API の概要

play

ネイティブの Mux Player をフルスクリーンで起動し、再生を開始します。

import { MuxPlayer } from '@capgo/capacitor-mux-player';

await MuxPlayer.play({ playbackId: 'playback-id-123' });

dismiss

プレイヤーが表示されている場合は、それを閉じます。

import { MuxPlayer } from '@capgo/capacitor-mux-player';

await MuxPlayer.dismiss();

isActive

プレイヤーが現在表示されているかどうかを返します。

import { MuxPlayer } from '@capgo/capacitor-mux-player';

const result = await MuxPlayer.isActive();
console.log(result);

型リファレンス

MuxPlayOptions

export interface MuxPlayOptions {
  /**
   * The playback ID of the asset you want to stream.
   */
  playbackId: string;
  /**
   * Provide a JSON web token generated for signed playback policies.
   */
  playbackToken?: string;
  /**
   * Provide a JSON web token generated for DRM playback policies.
   */
  drmToken?: string;
  /**
   * Override the default Mux playback domain (e.g. `stream.example.com`).
   */
  customDomain?: string;
  /**
   * Auto-play when the player becomes visible. Defaults to true.
   */
  autoPlay?: boolean;
  /**
   * Start playback from the provided time (in seconds).
   */
  startTime?: number;
  /**
   * Provide a poster image URL to display before playback begins.
   */
  poster?: string;
  /**
   * Provide a custom title to surface in native player chrome when available.
   */
  title?: string;
  /**
   * Provide a subtitle or description to surface in native player chrome when available.
   */
  subtitle?: string;
  /**
   * Set to true to keep the video muted when playback starts.
   */
  muted?: boolean;
  /**
   * Mux Data environment key used for analytics. If omitted, the SDK default is used.
   */
  environmentKey?: string;
  /**
   * Provide an explicit player name for analytics. Defaults to a generated name.
   */
  playerName?: string;
  /**
   * Enable smart caching when the underlying SDK supports it.
   */
  enableSmartCache?: boolean;
  /**
   * Enable verbose logging in native SDKs where available.
   */
  debug?: boolean;
}

MuxPlayerEvents

export interface MuxPlayerEvents {
  /**
   * Fired when the underlying player is ready to begin playback.
   */
  ready: { playerName?: string };
  /**
   * Fired when playback starts or resumes.
   */
  play: void;
  /**
   * Fired when playback pauses.
   */
  pause: void;
  /**
   * Fired when playback ends.
   */
  ended: void;
  /**
   * Fired when an unrecoverable error occurs.
   */
  error: { message: string };
  /**
   * Fired when the fullscreen player is closed.
   */
  playerDismissed: void;

  /**
   * Get the native Capacitor plugin version
   *
   * @returns {Promise<{ id: string }>} an Promise with version for this device
   * @throws An error if the something went wrong
   */
  getPluginVersion(): Promise<{ version: string }>;
}

Source of Truth

このページはプラグインの src/definitions.tsから生成されています。upstream で公開 API が変更されたら、再度 sync を実行してください。

Getting Startedの続きを進める

使用している場合 スタートガイド ダッシュボードと API の運用を計画するには、これを次と連携させます @capgo/capacitor-mux-player の使い方 「@capgo/capacitor-mux-player の使い方」のネイティブ機能については、 API の概要 「API の概要」の実装の詳細については、 はじめに 「はじめに」における実装の詳細については、 API キー および「API Keys」の実装の詳細については、 デバイス 実装の詳細については Devices を参照してください。