Mulai Berlatih

Bagian berjudul “Pasang”

Pengaturan Bantu AI kami untuk memasang plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Kemudian 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 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

Impor

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

Perbaiki Blokir Referer YouTube di WebView Utama

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

Ketika diaktifkan, plugin mempatch 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 memiliki header tetap menggunakan nilai aslinya.
• adalah optional dan defaultnya adalah Referer Dukungan tersedia pada __CAPGO_KEEP_0__
• refererHeader Dukungan tersedia pada Capgo https://www.youtube.com.
• Supported on 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 pengisian. Gunakan dengan berhati-hati - pauseVideo() biasanya lebih disukai.

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

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

Mainkan video yang sedang dipilih atau dimuat. Status pemutar akhir akan menjadi PLAYING (1).

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

pauseVideo

Tangguhkan video yang sedang diputar. Status pemutar akhir akan menjadi PAUSED (2), kecuali sudah ENDED (0).

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

await YoutubePlayer.pauseVideo({} as PlayerIdOptions);

seekTo

Lompat ke waktu tertentu dalam video. Jika pemutar dalam keadaan diam, tetap diam. Jika bermain, terus bermain.

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

await YoutubePlayer.seekTo({} as SeekToOptions);

loadVideoById

Muat dan mainkan video berdasarkan ID YouTube-nya.

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

await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);

cueVideoById

Tampilkan video berdasarkan ID tanpa memainkannya. Muat 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 berdasarkan URL lengkapnya.

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

await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);

cueVideoByUrl

Tampilkan video berdasarkan URL tanpa memainkannya.

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

await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);

cuePlaylist

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

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

await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);

loadPlaylist

Muat dan mainkan daftar putar.

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

await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);

nextVideo

Mainkan video berikutnya di daftar putar.

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

await YoutubePlayer.nextVideo({} as PlayerIdOptions);

previousVideo

Mainkan video sebelumnya di daftar putar.

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

await YoutubePlayer.previousVideo({} as PlayerIdOptions);

playVideoAt

Mainkan video spesifik di daftar putar berdasarkan index.

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

await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);

mute

Dadakan suara pemutar.

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

await YoutubePlayer.mute({} as PlayerIdOptions);

unMute

Buka dadakan suara pemutar.

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

await YoutubePlayer.unMute({} as PlayerIdOptions);

isMuted

Periksa apakah pemutar sedang dalam keadaan dadakan.

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

await YoutubePlayer.isMuted({} as PlayerIdOptions);

setVolume

Atur tingkat volume pemutar.

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

await YoutubePlayer.setVolume({} as SetVolumeOptions);

getVolume

Dapatkan 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

Atur dimensi pemutar dalam piksel.

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

await YoutubePlayer.setSize({} as SetSizeOptions);

getPlaybackRate

Dapatkan kecepatan pemutaran saat ini.

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

await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);

setPlaybackRate

Atur 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 putar daftar.

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

Bagian berjudul “getVideoLoadedFraction”

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

await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);

getPlayerState

Dapatkan keadaan saat ini dari pemain.

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

await YoutubePlayer.getPlayerState({} as PlayerIdOptions);

getAllPlayersEventsState

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

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

Tampilkan mode layar penuh atau matikan.

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

Dapatkan durasi video saat ini dalam detik.

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

await YoutubePlayer.getDuration({} as PlayerIdOptions);

getVideoUrl

Dapatkan URL YouTube.com untuk video saat ini.

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

await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);

getVideoEmbedCode

Dapatkan kode code untuk memasang video saat ini. Mengembalikan kode iframe HTML untuk memasang code.

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

await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);

getPlaylist

Dapatkan array ID video dalam daftar putar saat ini.

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

await YoutubePlayer.getPlaylist({} as PlayerIdOptions);

getPlaylistIndex

Dapatkan indeks video saat ini yang sedang diputar dalam daftar putar.

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

await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);

getIframe

Dapatkan elemen DOM iframe untuk pemain. Hanya platform web.

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

await YoutubePlayer.getIframe({} as PlayerIdOptions);

addEventListener

Tambahkan pemangku jawab ke pemain. 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 jawab dari pemain. 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.ts. Re-run sinkronisasi ketika API publik 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 asli dalam Menggunakan @capgo/capacitor-youtube-player, API Ringkasan untuk detail implementasi dalam API Ringkasan, Pengenalan untuk detail implementasi di Pengenalan, Kunci API untuk detail implementasi di Kunci API dan Perangkat untuk detail implementasi di Perangkat.