Mulai Dibuat

Instal

Anda dapat menggunakan Pengaturan Asisten AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda 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 Anda lebih suka Pengaturan 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';

Perbaiki Penghalang Referer YouTube di WebView Utama

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

Ketika diaktifkan, plugin memperbaiki Capacitor selama sinkronisasi/update sehingga permintaan YouTube yang ditangkap memiliki header yang valid. Referer Salin ke clipboard

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

• , dan youtube.com, youtube-nocookie.compermintaan yang dipengaruhi. youtu.be Permintaan yang sudah mendefinisikan
• header Referer header tetap memiliki nilai aslinya.
• refererHeader adalah optional dan default ke https://www.youtube.com.
• Dukungan pada Capacitor 8.x untuk platform iOS dan Android yang terpasang.

API Ringkasan

initialize

Inisialisasi 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

Hancurkan instance pemutar dan bebaskan sumber daya.

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

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

Hentikan pemutaran video dan batalkan pengunduhan. Gunakan dengan hati-hati - pauseVideo() biasanya lebih disukai.

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

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

Mainkan video yang saat ini sudah dipilih atau diunduh. Keadaan akhir pemutar video akan menjadi PLAYING (1).

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

pauseVideo

Hentikan pemutaran video yang sedang berlangsung. 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

Carilah waktu tertentu dalam video. Jika pemutar video berhenti, maka tetap berhenti. Jika sedang 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

Tandai video dengan ID tanpa memainkannya. Muat thumbnail dan siapkan pemutar, tapi 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

Tandai video dengan URL tanpa memainkannya.

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

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

cuePlaylist

Mencuekan daftar putar tanpa memainkannya. Memuat daftar putar dan mempersiapkan 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

Mainkan video tertentu di playlist dengan indeks.

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

await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

mute

Dinginkan 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

Periksa apakah pemutar sedang dalam keadaan diam.

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

Ambil tingkat volume pemutar saat ini. Mengembalikan volume bahkan jika pemutar diatur untuk diam.

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

await YoutubePlayer.getVolume({} as PlayerIdOptions);

setSize

Setel dimensi pemutar dalam piksel.

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

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

Ambil kecepatan putar saat ini.

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

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

Set 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

Aktifkan atau nonaktifkan pengulangan daftar pemutaran. Ketika diaktifkan, daftar pemutaran akan dimulai dari awal setelah video terakhir.

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

await YoutubePlayer.setLoop({} as SetLoopOptions);

setShuffle

Aktifkan atau nonaktifkan pengacakan daftar pemutaran.

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

await YoutubePlayer.setShuffle({} as SetShuffleOptions);

getVideoLoadedFraction

Dapatkan 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

Dapatkan keadaan saat ini dari pemutar.

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

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

getAllPlayersEventsState

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

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

await YoutubePlayer.getAllPlayersEventsState();

getCurrentTime

Dapatkan posisi pemutaran saat ini dalam detik.

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

await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);

toggleFullScreen

Aktifkan atau nonaktifkan mode layar penuh.

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

await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);

getPlaybackQuality

Dapatkan kualitas pemutaran saat ini.

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

await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);

setPlaybackQuality

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

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

await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);

getAvailableQualityLevels

Dapatkan daftar kualitas yang tersedia untuk video saat ini.

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

await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);

getDuration

Peroleh durasi video saat ini dalam detik.

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

await YoutubePlayer.getDuration({} as PlayerIdOptions);

getVideoUrl

Peroleh URL YouTube.com untuk video saat ini.

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

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

getVideoEmbedCode

Peroleh kode code untuk memasang video saat ini. Kembali kode HTML iframe 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

Peroleh indeks video yang sedang diputar di playlist.

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

await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

getIframe

Peroleh elemen DOM iframe untuk pemutar. Hanya platform web.

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

await YoutubePlayer.getIframe({} as PlayerIdOptions);

addEventListener

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

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

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

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.tsRe-run sinkronisasi ketika publik API berubah di atas

Lanjutkan dari Getting Started

Jika Anda menggunakan Getting Started untuk merencanakan dashboard dan API operasi, hubungkannya dengan Menggunakan @capgo/capacitor-youtube-player untuk kemampuan native di Menggunakan @capgo/capacitor-youtube-player, API Ringkasan untuk detail implementasi di API Ringkasan, Pendahuluan untuk detail implementasi di Pendahuluan, API Kunci untuk detail implementasi di API Kunci, dan Perangkat untuk detail implementasi di Perangkat.