YouTube Player Capacitor 플러그인

@capgo/capacitor-youtube-player 사용하기

Capacitor용 YouTube Player 플러그인 인터페이스입니다. 앱에서 YouTube 비디오 재생을 제어하는 메서드를 제공합니다.

설치

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

플러그인이 제공하는 기능

• initialize - 새 YouTube 플레이어 인스턴스를 초기화합니다.
• destroy - 플레이어 인스턴스를 제거하고 리소스를 해제합니다.
• stopVideo - 비디오 재생을 중지하고 로딩을 취소합니다. 가급적 사용을 자제하세요. 보통은 pauseVideo()가 더 적합합니다.
• playVideo - 현재 대기 중이거나 로드된 비디오를 재생합니다. 최종 플레이어 상태는 PLAYING (1)이 됩니다.

메인 WebView Referer 패치

활성화 patchRefererHeader 플러그인에서는 YouTube 콘텐츠가 잘 작동하지만, YouTube가 브라우저와 유사한 헤더를 요구하기 때문에 Capacitor의 메인 WebView에서는 작동하지 않을 때 Referer 헤더가 필요합니다.

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

이 패치는 오직 youtube.com, youtube-nocookie.com, 그리고 youtu.be 요청에만 적용됩니다. 기존의 요청 레벨 Referer 헤더는 그대로 유지되며, refererHeader 기본값은 https://www.youtube.com 생략된 경우에 적용됩니다.

사용 예시

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';

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

stopVideo

비디오 재생을 중단하고 로딩을 취소합니다. 가급적 pauseVideo() 사용을 권장합니다.

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

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

playVideo

현재 대기 중이거나 로드된 비디오를 재생합니다. 최종 플레이어 상태는 PLAYING (1)이 됩니다.

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

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

전체 레퍼런스

• GitHub: https://github.com/Cap-go/capacitor-youtube-player/
• 문서: /docs/plugins/youtube-player/

@capgo/capacitor-youtube-player 사용하기에서 계속하기

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