시작하기

이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

        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.

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

bunx 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-video-player` plugin in my project.

수동 설정을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

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

가져오기

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

빠른 시작

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

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

예시: isPlaying

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

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

예시: play

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

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

자주 하는 실수

네이티브 동기화: 실행 bunx cap sync 플러그인 업그레이드 후.
신뢰할 수 있는 소스: 신뢰 src/definitions.ts GitHub 레포지토리에서.

API 개요

`initPlayer`

비디오 플레이어 초기화

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

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

`isPlaying`

특정 playerId의 재생 여부 반환

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

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

`play`

지정된 playerId에서 현재 비디오를 재생합니다

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

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

`pause`

지정된 playerId에서 현재 비디오를 일시 정지합니다

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

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

`getDuration`

지정된 playerId에서 현재 비디오의 재생 시간을 가져옵니다

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

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

`getCurrentTime`

지정된 playerId에서 현재 비디오의 재생 시점을 가져옵니다

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

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

`setCurrentTime`

지정한 playerId에서 현재 비디오의 재생 위치를 설정합니다.

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

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

`getVolume`

지정한 playerId에서 현재 비디오의 볼륨을 가져옵니다.

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

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

`setVolume`

지정한 playerId에서 현재 비디오의 볼륨을 설정합니다.

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

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

`getMuted`

지정한 playerId에서 현재 비디오의 음소거 상태를 가져옵니다.

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

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

`setMuted`

지정된 playerId의 현재 비디오 음소거 여부를 설정합니다

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

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

`setRate`

지정된 playerId의 현재 비디오 재생 속도를 설정합니다

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

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

`getRate`

지정된 playerId의 현재 비디오 재생 속도를 가져옵니다

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

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

`stopAllPlayers`

재생 중인 모든 플레이어를 중지합니다

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

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

`showController`

컨트롤러 표시

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`

플레이어 종료

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

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

타입 레퍼런스

`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;
}

Source of Truth

이 페이지는 플러그인의 src/definitions.tsupstream에서 public API가 변경되면 sync를 다시 실행하세요.

시작하기 다음 단계

사용 중이라면 시작하기 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player 사용 시 네이티브 기능은, @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항, @capgo/capacitor-video-player 구현 세부 사항은 @capgo/capacitor-video-player에서 확인하고, @capgo/capacitor-native-navigation 사용하기 @capgo/capacitor-native-navigation. 사용 시의 Native 기능