시작하기

설치

Capgo의 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-youtube-player` plugin in my project.

만약 Manual Setup을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:

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

Import

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

메인 웹뷰에서 YouTube 참조 차단을 고치기

YouTube가 플러그인 내에서 작동하지만 동일한 앱이 YouTube 페이지, 임베드, 또는 API를 통해 메인 웹뷰를 통해 로드되는 경우, Capacitor의 메인 웹뷰에서 YouTube 참조 차단을 활성화합니다. patchRefererHeader Capacitor의 구성에서 활성화합니다.

Capacitor가 동기화/업데이트 시 플러그인을 패치하여 유투브 요청에 유효한 헤더를 포함하도록 합니다. Referer 클립보드 복사

{
  "plugins": {
    "YoutubePlayer": {
      "patchRefererHeader": true,
      "refererHeader": "https://www.youtube.com"
    }
  }
}

• 만 youtube.com, youtube-nocookie.com이러한 요청만 영향을 받습니다. youtu.be 이미 헤더를 정의한
• 요청은 영향을 받지 않습니다. Referer 원본 값이 유지됩니다.
• refererHeader 선택 사항이며 기본값이 https://www.youtube.com.
• Capacitor 8.x iOS 및 Android 플랫폼에 설치된 경우 지원됩니다.

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

영상 재생을 중단하고 로딩을 취소합니다. 이 기능을 자주 사용하지 마세요 - 영상 일시 정지를 사용하는 것이 좋습니다.

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

유튜브 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로 비디오를 로드하고 재생합니다.

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

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

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

await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

loadPlaylist

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

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

플레이어 오디오가 현재 무음 처리되어 있는지 확인합니다.

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

await YoutubePlayer.unMute({} as PlayerIdOptions);

isMuted

Check if the player is currently muted.

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

await YoutubePlayer.isMuted({} as PlayerIdOptions);

setVolume

플레이어 볼륨 수준을 설정합니다.

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

await YoutubePlayer.setVolume({} as SetVolumeOptions);

getVolume

현재 플레이어 볼륨 수준을 가져옵니다. 음소거 상태이더라도 볼륨을 반환합니다.

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

await YoutubePlayer.getVolume({} as PlayerIdOptions);

setSize

플레이어 크기를 픽셀 단위로 설정합니다.

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

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

현재 재생 속도 가져오기.

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

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

현재 동영상의 재생 속도 설정

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

await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

getAvailablePlaybackRates

현재 동영상의 재생 속도 설정 가능한 목록 가져오기

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이 업스트림에서 변경될 때 다시 싱크를 실행하세요.

Getting Started에서 계속

이 플러그인을 사용하는 경우 Getting Started 계획 대시보드 및 API 운영을 위해 Using @capgo/capacitor-youtube-player native 기능을 사용하는 @capgo/capacitor-youtube-player에 대해 API 개요 API 개요에 대한 구현 세부 정보 소개 소개에 대한 구현 세부 정보 API 키 API 키에 대한 구현 세부 정보, 그리고 장치 장치에 대한 구현 세부 정보