시작하기

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

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-youtube-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/youtube-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.

설치

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

import

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

API 개요

`initialize`

새로운 YouTube 플레이어 인스턴스를 초기화합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.initialize({
  playerId: 'my-player',
  videoId: 'dQw4w9WgXcQ',
  playerSize: { width: 640, height: 360 },
  privacyEnhanced: true
});

`destroy`

플레이어 인스턴스를 종료하고 자원들을 해제합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.destroy({} as PlayerIdOptions);

`stopVideo`

비디오 재생을 중지하고 로딩을 취소합니다. 이 함수를 사용할 때는 주로 pauseVideo()를 사용하는 것이 좋습니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

`playVideo`

현재 큐된 또는 로드된 비디오를 재생합니다. 최종 플레이어 상태는 PLAYING(1)입니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.playVideo({} as PlayerIdOptions);

`pauseVideo`

현재 재생 중인 비디오를 멈추세요. 재생이 멈추면 최종 플레이어 상태는 PAUSED (2)로, 이미 ENDED (0) 상태라면 그대로입니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.pauseVideo({} as PlayerIdOptions);

`seekTo`

비디오의 특정 시간으로 이동하세요. 플레이어가 멈춰져 있다면 멈춰져 있고, 재생 중이라면 계속 재생합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.seekTo({} as SeekToOptions);

`loadVideoById`

YouTube ID로 비디오를 로드하고 재생하세요.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);

`cueVideoById`

ID로 비디오를 큐하세요. 이미지와 플레이어를 준비하지만, 비디오를 요청하기까지 playVideo() 함수를 호출해야 합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);

`loadVideoByUrl`

URL의 전체 URL로 비디오를 로드하고 재생합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);

`cueVideoByUrl`

URL로 비디오를 큐합니다. 재생하지 않습니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

`cuePlaylist`

URL로 플레이리스트를 큐합니다. 재생하지 않습니다. 플레이리스트를 로드하고 첫 번째 비디오를 준비합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

`loadPlaylist`

URL로 플레이리스트를 로드하고 재생합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

`nextVideo`

플레이리스트의 다음 동영상을 재생합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.nextVideo({} as PlayerIdOptions);

`previousVideo`

플레이리스트의 이전 동영상을 재생합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.previousVideo({} as PlayerIdOptions);

`playVideoAt`

클립보드 복사

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

`mute`

클립보드 복사

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.mute({} as PlayerIdOptions);

`unMute`

__CAPGO_KEEP_2__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.unMute({} as PlayerIdOptions);

`isMuted`

__CAPGO_KEEP_3__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.isMuted({} as PlayerIdOptions);

`setVolume`

__CAPGO_KEEP_4__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setVolume({} as SetVolumeOptions);

`getVolume`

__CAPGO_KEEP_6__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVolume({} as PlayerIdOptions);

`setSize`

__CAPGO_KEEP_2__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setSize({} as SetSizeOptions);

`getPlaybackRate`

__CAPGO_KEEP_3__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

`setPlaybackRate`

__CAPGO_KEEP_4__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

`getAvailablePlaybackRates`

__CAPGO_KEEP_5__

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);

`setLoop`

루프를 사용하거나 사용하지 않습니다. 루프가 활성화되면 마지막 비디오 후에 플레이리스트는 시작부터 다시 시작됩니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setLoop({} as SetLoopOptions);

`setShuffle`

플레이리스트 셔플을 사용하거나 사용하지 않습니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setShuffle({} as SetShuffleOptions);

`getVideoLoadedFraction`

비디오 로드 퍼센트를 가져옵니다. 더 신뢰할 수 있는 getVideoBytesLoaded/getVideoBytesTotal이 deprecated된 함수입니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);

`getPlayerState`

플레이어의 현재 상태를 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

`getAllPlayersEventsState`

모든 활성 플레이어의 이벤트 상태를 가져옵니다. 여러 플레이어 인스턴스를 추적하는 데 유용합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getAllPlayersEventsState();

`getCurrentTime`

현재 재생 위치(초)를 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

`toggleFullScreen`

클립보드 복사

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

`getPlaybackQuality`

클립보드 복사

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

`setPlaybackQuality`

네트워크 상황에 따라 실제 품질이 다를 수 있습니다. 네트워크 상황에 따라 실제 품질이 다를 수 있습니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);

`getAvailableQualityLevels`

현재 비디오의 품질 수준 목록을 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);

`getDuration`

현재 비디오의 길이를 초 단위로 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getDuration({} as PlayerIdOptions);

`getVideoUrl`

현재 비디오의 YouTube.com URL을 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

`getVideoEmbedCode`

현재 비디오의 임베드 code을 가져옵니다. 현재 비디오의 HTML iframe 임베드 code을 반환합니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);

`getPlaylist`

현재 플레이리스트의 비디오 ID 배열을 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaylist({} as PlayerIdOptions);

`getPlaylistIndex`

현재 플레이리스트에서 재생 중인 비디오의 인덱스를 가져옵니다.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

`getIframe`

플레이어의 iframe DOM 요소를 가져옵니다. 웹 플랫폼 전용.

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.getIframe({} as PlayerIdOptions);

`addEventListener`

플레이어에 이벤트 리스너를 추가합니다. (웹 플랫폼 전용)

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

YoutubePlayer.addEventListener({
  playerId: 'my-player',
  eventName: 'onStateChange',
  listener: (event) => {
  console.log('Player state:', event.data);
  },
});

`removeEventListener`

플레이어에서 이벤트 리스너를 제거합니다. (웹 플랫폼 전용)

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);

타입 참조

`PlayerIdOptions`

export interface PlayerIdOptions {
  playerId: string;
}

`SeekToOptions`

export interface SeekToOptions extends PlayerIdOptions {
  playerId: string;
  seconds: number;
  allowSeekAhead: boolean;
}

`VideoByIdMethodOptions`

export interface VideoByIdMethodOptions extends PlayerIdOptions {
  playerId: string;
  options: IVideoOptionsById;
}

`VideoByUrlMethodOptions`

export interface VideoByUrlMethodOptions extends PlayerIdOptions {
  playerId: string;
  options: IVideoOptionsByUrl;
}

`PlaylistMethodOptions`

export interface PlaylistMethodOptions extends PlayerIdOptions {
  playerId: string;
  playlistOptions: IPlaylistOptions;
}

`PlayVideoAtOptions`

export interface PlayVideoAtOptions extends PlayerIdOptions {
  playerId: string;
  index: number;
}

`SetVolumeOptions`

export interface SetVolumeOptions extends PlayerIdOptions {
  playerId: string;
  volume: number;
}

`SetSizeOptions`

export interface SetSizeOptions extends PlayerIdOptions {
  playerId: string;
  width: number;
  height: number;
}

`SetPlaybackRateOptions`

export interface SetPlaybackRateOptions extends PlayerIdOptions {
  playerId: string;
  suggestedRate: number;
}

`SetLoopOptions`

export interface SetLoopOptions extends PlayerIdOptions {
  playerId: string;
  loopPlaylists: boolean;
}

`SetShuffleOptions`

export interface SetShuffleOptions extends PlayerIdOptions {
  playerId: string;
  shufflePlaylist: boolean;
}

`ToggleFullScreenOptions`

export interface ToggleFullScreenOptions extends PlayerIdOptions {
  playerId: string;
  isFullScreen: boolean | null | undefined;
}

진실의 근원

이 페이지는 플러그인의 src/definitions.ts. API이 업스트림에서 변경될 때 다시 싱크를 실행하세요.