Panduan Memulai

Instal

Anda bisa menggunakan AI-Assisted Setup untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda menggunakan perintah berikut:

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

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

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

Impor

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

Mulai cepat

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

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

Masalah umum

• Listeners: hapus handle saat screen unmount.
• Inisialisasi sekali saja: jalankan setup saat bootstrap aplikasi.
• Sumber kebenaran: percaya src/definitions.ts pada repo GitHub.

Perbaiki Pemblokiran Referer YouTube di WebView Utama

Jika YouTube berfungsi di dalam plugin tetapi gagal saat aplikasi yang sama memuat halaman, embed, atau API YouTube melalui main WebView Capacitor, aktifkan patchRefererHeader pada konfigurasi Capacitor Anda.

Saat diaktifkan, plugin akan melakukan patch pada Capacitor selama proses sync/update agar request YouTube yang dicegat menyertakan Referer header.

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

• Hanya youtube.com, youtube-nocookie.com, dan youtu.be request yang terdampak.
• Request yang sudah mendefinisikan Referer header akan tetap menggunakan nilai aslinya.
• refererHeader adalah opsional dan defaultnya adalah https://www.youtube.com.
• Didukung di Capacitor 8.x untuk platform iOS dan Android yang terinstal.

Ikhtisar API

initialize

Inisialisasi instance YouTube player baru.

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

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

destroy

Hapus instance player dan bebaskan resource.

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

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

stopVideo

Hentikan playback video dan batalkan loading. Gunakan sesekali saja - pauseVideo() biasanya lebih disarankan.

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

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

playVideo

Putar video yang sedang antre atau dimuat. Status akhir player adalah PLAYING (1).

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

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

pauseVideo

Jeda video yang sedang diputar. Status akhir player adalah PAUSED (2), kecuali jika sudah ENDED (0).

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

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

seekTo

Geser ke waktu tertentu dalam video. Jika player sedang dijeda, status tetap dijeda. Jika sedang diputar, akan lanjut memutar.

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

const result = await YoutubePlayer.seekTo({
  playerId: 'player-id-123',
  seconds: 10,
  allowSeekAhead: true,
});
console.log(result);

loadVideoById

Muat dan putar video berdasarkan YouTube ID.

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

const result = await YoutubePlayer.loadVideoById({
  playerId: 'player-id-123',
  options: { videoId: 'video-id-123' },
});
console.log(result);

cueVideoById

Siapkan video berdasarkan ID tanpa memutarnya. Memuat thumbnail dan menyiapkan player, tapi tidak meminta video sampai playVideo() dipanggil.

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

const result = await YoutubePlayer.cueVideoById({
  playerId: 'player-id-123',
  options: { videoId: 'video-id-123' },
});
console.log(result);

loadVideoByUrl

Muat dan putar video menggunakan URL lengkapnya.

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

const result = await YoutubePlayer.loadVideoByUrl({
  playerId: 'player-id-123',
  options: { mediaContentUrl: 'https://example.com' },
});
console.log(result);

cueVideoByUrl

Siapkan video berdasarkan URL tanpa memutarnya.

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

const result = await YoutubePlayer.cueVideoByUrl({
  playerId: 'player-id-123',
  options: { mediaContentUrl: 'https://example.com' },
});
console.log(result);

cuePlaylist

Siapkan playlist tanpa memutarnya. Memuat playlist dan menyiapkan video pertama.

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

const result = await YoutubePlayer.cuePlaylist({
  playerId: 'player-id-123',
  playlistOptions: { listType: 'playlist' },
});
console.log(result);

loadPlaylist

Memuat dan memutar playlist.

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

const result = await YoutubePlayer.loadPlaylist({
  playerId: 'player-id-123',
  playlistOptions: { listType: 'playlist' },
});
console.log(result);

nextVideo

Memutar video berikutnya dalam playlist.

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

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

previousVideo

Memutar video sebelumnya dalam playlist.

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

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

playVideoAt

Memutar video tertentu dalam playlist berdasarkan index.

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

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

mute

Mute audio player.

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

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

unMute

Unmute audio player.

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

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

isMuted

Cek apakah player sedang di-mute.

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

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

setVolume

Atur level volume player.

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

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

getVolume

Dapatkan level volume player saat ini. Tetap mengembalikan nilai volume meskipun player dalam kondisi mute.

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

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

setSize

Atur dimensi player dalam satuan piksel.

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

const result = await YoutubePlayer.setSize({
  playerId: 'player-id-123',
  width: 1080,
  height: 1920,
});
console.log(result);

getPlaybackRate

Dapatkan playback rate saat ini.

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

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

setPlaybackRate

Atur kecepatan playback.

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

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

getAvailablePlaybackRates

Dapatkan daftar playback rate yang tersedia untuk video saat ini.

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

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

setLoop

Aktifkan atau nonaktifkan looping playlist. Jika aktif, playlist akan mengulang dari awal setelah video terakhir.

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

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

setShuffle

Aktifkan atau nonaktifkan shuffle playlist.

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

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

getVideoLoadedFraction

Dapatkan bagian video yang sudah di-buffer. Lebih andal dibanding getVideoBytesLoaded/getVideoBytesTotal yang sudah deprecated.

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

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

getPlayerState

Dapatkan status player saat ini.

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

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

getAllPlayersEventsState

Dapatkan status event untuk semua player yang aktif. Berguna untuk melacak beberapa instance player.

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

const result = await YoutubePlayer.getAllPlayersEventsState();
console.log(result);

getCurrentTime

Dapatkan posisi playback saat ini dalam detik.

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

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

toggleFullScreen

Aktifkan atau matikan mode fullscreen.

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

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

getPlaybackQuality

Dapatkan kualitas playback saat ini.

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

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

setPlaybackQuality

Atur kualitas playback yang disarankan. Kualitas aktual dapat berbeda tergantung kondisi jaringan.

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

const result = await YoutubePlayer.setPlaybackQuality({
  playerId: 'player-id-123',
  suggestedQuality: IPlaybackQuality.SMALL,
});
console.log(result);

getAvailableQualityLevels

Dapatkan daftar level kualitas yang tersedia untuk video saat ini.

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

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

getDuration

Dapatkan durasi video saat ini dalam satuan detik.

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

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

getVideoUrl

Dapatkan URL YouTube.com untuk video saat ini.

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

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

getVideoEmbedCode

Dapatkan embed code untuk video saat ini. Mengembalikan HTML iframe embed code.

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

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

getPlaylist

Dapatkan array ID video dalam playlist saat ini.

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

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

getPlaylistIndex

Dapatkan indeks video yang sedang diputar dalam playlist.

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

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

getIframe

Dapatkan elemen DOM iframe untuk player. Hanya untuk platform Web.

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

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

addEventListener

Tambahkan event listener ke player. Hanya untuk platform Web.

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

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

removeEventListener

Hapus event listener dari player. Hanya untuk platform Web.

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

await YoutubePlayer.removeEventListener({
  playerId: 'player-id-123',
  eventName: 'onReady',
  listener: (event) => {
    console.log(event);
  },
});

Referensi Tipe

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

Sumber Kebenaran

Halaman ini dibuat dari plugin src/definitions.ts. Jalankan ulang sync saat API publik berubah di upstream.

Lanjutkan dari Getting Started

Jika Anda menggunakan Panduan Memulai untuk merencanakan operasi dashboard dan API, hubungkan dengan Menggunakan @capgo/capacitor-youtube-player untuk kapabilitas native di Menggunakan @capgo/capacitor-youtube-player, Ikhtisar API untuk detail implementasi di Ringkasan API, Pendahuluan untuk detail implementasi di Pendahuluan, Kunci API untuk detail implementasi di API Keys, dan Perangkat untuk detail implementasi di Perangkat.