Pembuatan Awal

Copikan prompt pengaturan dengan langkah instalasi dan panduan markdown lengkap untuk plugin ini.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-video-player`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/video-player/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Instalasi

Anda dapat menggunakan Pengaturan Bantuan AI untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

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

Lalu gunakan prompt berikut:

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

Jika Anda lebih suka Pengaturan Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

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

Impor

import { VideoPlayer } from '@capgo/capacitor-video-player';

API Pengantar

`initPlayer`

Inisialisasi pemutar video

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.initPlayer({ mode: 'fullscreen' });
console.log(result);

`isPlaying`

Kembalikan jika playerId yang diberikan sedang bermain

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.isPlaying({ playerId: 'player-id-123' });
console.log(result);

`play`

Mainkan video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.play({ playerId: 'player-id-123' });
console.log(result);

`pause`

Berhenti video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.pause({ playerId: 'player-id-123' });
console.log(result);

`getDuration`

Dapatkan durasi video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getDuration({ playerId: 'player-id-123' });
console.log(result);

`getCurrentTime`

Dapatkan waktu saat ini video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getCurrentTime({ playerId: 'player-id-123' });
console.log(result);

`setCurrentTime`

Atur waktu saat ini untuk mencari video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.setCurrentTime({
  playerId: 'player-id-123',
  seektime: 10,
});
console.log(result);

`getVolume`

Dapatkan volume video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getVolume({ playerId: 'player-id-123' });
console.log(result);

`setVolume`

Atur volume video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.setVolume({ volume: 0.5 });
console.log(result);

`getMuted`

Dapatkan status bisu video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getMuted({ playerId: 'player-id-123' });
console.log(result);

`setMuted`

Atur kebisingan video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.setMuted({ muted: true });
console.log(result);

`setRate`

Atur kecepatan video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.setRate({ rate: 1 });
console.log(result);

`getRate`

Dapatkan kecepatan video saat ini dari playerId yang diberikan

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getRate({ playerId: 'player-id-123' });
console.log(result);

`stopAllPlayers`

Hentikan semua pemutaran

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.stopAllPlayers();
console.log(result);

`showController`

Pengontrol Tampil

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.showController();
console.log(result);

`isControllerIsFullyVisible`

isControllerIsFullyVisible

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.isControllerIsFullyVisible();
console.log(result);

`exitPlayer`

Exit player

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.exitPlayer();
console.log(result);

Referensi Tipe

`capVideoPlayerOptions`

export interface capVideoPlayerOptions {
  /**
   * Player mode
   *  - "fullscreen"
   *  - "embedded" (Web only)
   */
  mode?: string;
  /**
   * The url of the video to play
   */
  url?: string;
  /**
   * The url of subtitle associated with the video
   */
  subtitle?: string;
  /**
   * The language of subtitle
   * see https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers
   */
  language?: string;
  /**
   * SubTitle Options
   */
  subtitleOptions?: SubTitleOptions;
  /**
   * Id of DIV Element parent of the player
   */
  playerId?: string;
  /**
   * Initial playing rate
   */
  rate?: number;
  /**
   * Exit on VideoEnd (iOS, Android)
   * default: true
   */
  exitOnEnd?: boolean;
  /**
   * Loop on VideoEnd when exitOnEnd false (iOS, Android)
   * default: false
   */
  loopOnEnd?: boolean;
  /**
   * Picture in Picture Enable (iOS, Android)
   * default: true
   */
  pipEnabled?: boolean;
  /**
   * Background Mode Enable (iOS, Android)
   * default: true
   */
  bkmodeEnabled?: boolean;
  /**
   * Show Controls Enable (iOS, Android)
   * default: true
   */
  showControls?: boolean;
  /**
   * Display Mode ["all", "portrait", "landscape"] (iOS, Android)
   * default: "all"
   */
  displayMode?: string;
  /**
   * Component Tag or DOM Element Tag (React app)
   */
  componentTag?: string;
  /**
   * Player Width (mode "embedded" only)
   */
  width?: number;
  /**
   * Player height (mode "embedded" only)
   */
  height?: number;
  /**
   * Headers for the request (iOS, Android)
   * by Manuel García Marín (https://github.com/PhantomPainX)
   */
  headers?: {
    [key: string]: string;
  };
  /**
   * Title shown in the player (Android)
   * by Manuel García Marín (https://github.com/PhantomPainX)
   */
  title?: string;
  /**
   * Subtitle shown below the title in the player (Android)
   * by Manuel García Marín (https://github.com/PhantomPainX)
   */
  smallTitle?: string;
  /**
   * ExoPlayer Progress Bar and Spinner color (Android)
   * by Manuel García Marín (https://github.com/PhantomPainX)
   * Must be a valid hex color code
   * default: #FFFFFF
   */
  accentColor?: string;
  /**
   * Chromecast enable/disable (Android)
   * by Manuel García Marín (https://github.com/PhantomPainX)
   * default: true
   */
  chromecast?: boolean;
  /**
   * Artwork url to be shown in Chromecast player
   * by Manuel García Marín (https://github.com/PhantomPainX)
   * default: ""
   */
  artwork?: string;
  /**
   * DRM configuration for protected content (iOS: FairPlay, Android: Widevine)
   */
  drm?: DrmOptions;
}

`capVideoPlayerResult`

export interface capVideoPlayerResult {
  /**
   * result set to true when successful else false
   */
  result?: boolean;
  /**
   * method name
   */
  method?: string;
  /**
   * value returned
   */
  value?: any;
  /**
   * message string
   */
  message?: string;
}

`capVideoPlayerIdOptions`

export interface capVideoPlayerIdOptions {
  /**
   * Id of DIV Element parent of the player
   */
  playerId?: string;
}

`capVideoTimeOptions`

export interface capVideoTimeOptions {
  /**
   * Id of DIV Element parent of the player
   */
  playerId?: string;
  /**
   * Video time value you want to seek to
   */
  seektime?: number;
}

`capVideoVolumeOptions`

export interface capVideoVolumeOptions {
  /**
   * Id of DIV Element parent of the player
   */
  playerId?: string;
  /**
   * Volume value between [0 - 1]
   */
  volume?: number;
}

`capVideoMutedOptions`

export interface capVideoMutedOptions {
  /**
   * Id of DIV Element parent of the player
   */
  playerId?: string;
  /**
   * Muted value true or false
   */
  muted?: boolean;
}

`capVideoRateOptions`

export interface capVideoRateOptions {
  /**
   * Id of DIV Element parent of the player
   */
  playerId?: string;
  /**
   * Rate value
   */
  rate?: number;
}

`SubTitleOptions`

export interface SubTitleOptions {
  /**
   * Foreground Color in RGBA (default rgba(255,255,255,1)
   */
  foregroundColor?: string;
  /**
   * Background Color in RGBA (default rgba(0,0,0,1)
   */
  backgroundColor?: string;
  /**
   * Font Size in pixels (default 16)
   */
  fontSize?: number;

  /**
   * 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 }>;
}

`DrmOptions`

export interface DrmOptions {
  /**
   * FairPlay DRM configuration (iOS)
   */
  fairplay?: FairPlayDrmOptions;
  /**
   * PlayReady DRM configuration
   */
  playready?: PlayreadyDrmOptions;
  /**
   * Widevine DRM configuration (Android)
   */
  widevine?: WidevineDrmOptions;
}

`FairPlayDrmOptions`

export interface FairPlayDrmOptions {
  /**
   * The URL to fetch the FairPlay certificate
   */
  certificateUrl?: string;
  /**
   * The URL to send the SPC and receive the CKC license (FairPlay license server URL)
   */
  contentKeySpcUrl?: string;
}

`PlayreadyDrmOptions`

export interface PlayreadyDrmOptions {
  /**
   * The URL to fetch the PlayReady license
   */
  certificateUrl?: string;
}

`WidevineDrmOptions`

export interface WidevineDrmOptions {
  /**
   * The URL to fetch the Widevine license
   */
  certificateUrl?: string;
}

Sumber Kebenaran

Halaman ini dihasilkan dari plugin’s src/definitions.ts. Jalankan ulang sinkronisasi ketika API publik berubah di atas.

Teruskan dari Getting Started

Jika Anda menggunakan Mulai Menggunakan untuk merencanakan perilaku media asli dan antarmuka, hubungkannya dengan Gunakan @capgo/capacitor-video-player untuk kemampuan asli di Gunakan @capgo/capacitor-video-player, Gunakan @capgo/capacitor-live-activities untuk kemampuan asli di Gunakan @capgo/capacitor-live-activities, @capgo/capacitor-aktivitas-hidup-nyata untuk detail implementasi di @capgo/capacitor-aktivitas-hidup-nyata, @capgo/capacitor-player-video untuk detail implementasi di @capgo/capacitor-player-video, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli di Menggunakan @capgo/capacitor-navigasi-asli.