Mulai Menggunakan

Instal

Kamu bisa menggunakan Setup Bantuan AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI kamu menggunakan perintah berikut:

npx 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 kamu lebih suka Menggunakan Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

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

Import

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

Memperbaiki Penghalang Referer YouTube di WebView Utama

Jika YouTube berfungsi di dalam plugin tetapi gagal ketika aplikasi yang sama memuat halaman, iklan, atau API YouTube melalui WebView utama Capacitor, aktifkan patchRefererHeader di konfigurasi Capacitor Anda.

When enabled, the plugin patches Capacitor during sync/update so intercepted YouTube requests include a valid Referer header.

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

• , dan youtube.com, youtube-nocookie.com, and youtu.be permintaan tidak terpengaruh.
• Permintaan yang sudah mendefinisikan Referer Tetapkan nilai header mereka asli.
• refererHeader adalah opsional dan default ke https://www.youtube.com.
• Dukungan pada Capacitor 8.x untuk platform iOS dan Android yang terpasang.

API Ringkasan

initialize

Mulai instance pemutar YouTube 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 pemutar dan bebaskan sumber daya.

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

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

Berhenti memutar video dan batalkan pengunduhan. Gunakan ini dengan hati-hati - pauseVideo() biasanya lebih disukai.

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

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

Mutar video yang saat ini dipilih atau dimuat. Keadaan akhir pemutar video akan menjadi PLAYING (1).

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

pauseVideo

Berhenti memutar video yang sedang bermain. Keadaan akhir pemutar video akan menjadi PAUSED (2), kecuali sudah ENDED (0).

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

await YoutubePlayer.pauseVideo({} as PlayerIdOptions);

seekTo

Cari ke waktu tertentu dalam video. Jika pemutar video berhenti, maka tetap berhenti. Jika bermain, terus bermain.

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

await YoutubePlayer.seekTo({} as SeekToOptions);

loadVideoById

Muat dan mainkan video dengan ID YouTube-nya.

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

await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);

cueVideoById

Tetapkan video oleh ID tanpa memainkannya. Muatlah thumbnail dan siapkan pemutar, tetapi tidak meminta video sampai playVideo() dipanggil.

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

await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);

loadVideoByUrl

Muat dan mainkan video dengan URL lengkapnya.

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

await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);

cueVideoByUrl

Tetapkan video oleh URL tanpa memainkannya.

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

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

cuePlaylist

Muat daftar putar tanpa memainkannya. Muat daftar putar dan siapkan video pertama.

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

await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

loadPlaylist

Memuat dan memainkan daftar putar.

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

await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

nextVideo

Memainkan video berikutnya di daftar putar.

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

await YoutubePlayer.nextVideo({} as PlayerIdOptions);

previousVideo

Memainkan video sebelumnya di daftar putar.

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

await YoutubePlayer.previousVideo({} as PlayerIdOptions);

playVideoAt

Mengmainkan video spesifik di playlist dengan indeks.

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

await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

mute

Matikan suara pemutar.

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

await YoutubePlayer.mute({} as PlayerIdOptions);

unMute

Aktifkan suara pemutar.

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

await YoutubePlayer.unMute({} as PlayerIdOptions);

isMuted

Cek apakah pemutar suara sedang dimatikan.

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

await YoutubePlayer.isMuted({} as PlayerIdOptions);

setVolume

Setel tingkat volume pemutar.

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

await YoutubePlayer.setVolume({} as SetVolumeOptions);

getVolume

Get the current player volume level. Returns volume even if player is muted.

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

await YoutubePlayer.getVolume({} as PlayerIdOptions);

setSize

Atur dimensi pemutar dalam piksel.

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

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

Dapatkan tingkat pengulangan pemutar saat ini.

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

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

Pilih kecepatan pemutaran.

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

await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);

getAvailablePlaybackRates

Dapatkan daftar kecepatan pemutaran yang tersedia untuk video saat ini.

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

await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);

setLoop

Mengaktifkan atau menonaktifkan ulangan daftar putar. Ketika diaktifkan, daftar putar akan dimulai dari awal setelah video terakhir.

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

await YoutubePlayer.setLoop({} as SetLoopOptions);

setShuffle

Bagian berjudul “setShuffle”

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

await YoutubePlayer.setShuffle({} as SetShuffleOptions);

getVideoLoadedFraction

Ambil bagian dari video yang telah di-buffer. Lebih dapat diandalkan daripada getVideoBytesLoaded/getVideoBytesTotal yang sudah deprecated.

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

await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);

getPlayerState

Ambil keadaan saat ini dari pemutar.

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

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

getAllPlayersEventsState

Ambil keadaan acara untuk semua pemutar aktif. Bermanfaat untuk mengikuti beberapa instance pemutar.

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

await YoutubePlayer.getAllPlayersEventsState();

getCurrentTime

Ambil posisi pemutaran saat ini dalam detik.

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

await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

toggleFullScreen

Toggle fullscreen mode on or off.

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

await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

getPlaybackQuality

Peroleh kualitas pemutaran saat ini.

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

await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

setPlaybackQuality

Set kualitas pemutaran yang disarankan. Kualitas nyata mungkin berbeda berdasarkan kondisi jaringan.

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

await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);

getAvailableQualityLevels

Peroleh daftar tingkat kualitas yang tersedia untuk video saat ini.

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

await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);

getDuration

Waktu durasi video saat ini dalam detik.

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

await YoutubePlayer.getDuration({} as PlayerIdOptions);

getVideoUrl

URL YouTube.com untuk video saat ini.

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

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

getVideoEmbedCode

Peroleh kode code untuk video saat ini. Kembalikan kode iframe HTML code.

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

await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);

getPlaylist

Peroleh array ID video dalam daftar putar saat ini.

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

await YoutubePlayer.getPlaylist({} as PlayerIdOptions);

getPlaylistIndex

Oleh-oleh indeks video yang sedang diputar di playlist.

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

await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

getIframe

Dapatkan elemen DOM iframe untuk pemutar. Hanya platform web.

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

await YoutubePlayer.getIframe({} as PlayerIdOptions);

addEventListener

Tambahkan pemangku acara ke pemutar. Hanya 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 pemangku acara dari pemutar. Hanya platform web.

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

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

Panduan 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 dihasilkan dari plugin’s src/definitions.ts. Re-run sinkronisasi ketika API publik berubah di atas

Teruskan dari Getting Started

Jika Anda menggunakan Mulai Menggunakan untuk merencanakan dashboard dan API operasi, hubungkannya dengan Menggunakan @capgo/capacitor-youtube-player untuk kemampuan asli di Menggunakan @capgo/capacitor-youtube-player, API Pengenalan untuk detail implementasi di API Pengenalan Pengenalan untuk detail implementasi di Pengenalan API Kunci untuk detail implementasi di API Kunci, dan Perangkat Untuk detail implementasi di Perangkat.