快速入门

安装

你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中：

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

然后使用以下 prompt：

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 或签名策略生成的播放令牌 (playback token)。

常见坑点

• 单个播放器: 检查 isActive() 在调用之前 play() 再次尝试。
• 忽略清理: 如果之后必须恢复内联 WebView 视频，请监听 dismissal 事件。
• Token 会过期：长会话前在服务端刷新已签名的 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 }>;
}

单一事实来源

本页面由插件的 src/definitions.ts生成。当上游的公共 API 发生变化时，请重新运行 sync。

从入门指南继续

如果你正在使用 快速入门 要规划 dashboard 和 API 操作，请将其连接到 使用 @capgo/capacitor-mux-player 用于“使用 @capgo/capacitor-mux-player”中的原生能力， API 概览 关于 API Overview 中的实现细节， 简介 关于 Introduction 中的实现细节， API 密钥 有关 API Keys 的实现细节，以及 设备 有关 Devices 的实现细节。