Langsung ke konten
Capgo - Live Updates for Capacitor Apps Capgo

Memulai

  1. Instal paket

    Terminal window
    npm i @capgo/capacitor-youtube-player

  2. Sinkronisasi dengan proyek asli

    Terminal window
    npx cap sync

Penggunaan Dasar

Section titled “Penggunaan Dasar”
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';


// Initialize the player
const result = await YoutubePlayer.initialize({
  playerId: 'youtube-player',
  playerSize: { width: 640, height: 360 },
  videoId: 'dQw4w9WgXcQ',
  fullscreen: false,
  playerVars: {
    autoplay: 1,
    controls: 1
  }
});


// Play video
await YoutubePlayer.playVideo(result.player);


// Pause video
await YoutubePlayer.pauseVideo(result.player);


// Listen to player events
YoutubePlayer.addEventListener(result.player, 'onStateChange', (event) => {
  console.log('Player state:', event.data);
});

API Referensi

Section titled “API Referensi”

inisialisasi (pilihan)

Section titled “inisialisasi (pilihan)”

Inisialisasi instance pemutar YouTube.

const { player, playerReady } = await YoutubePlayer.initialize({
  playerId: 'my-player',
  playerSize: { width: 1280, height: 720 },
  videoId: 'VIDEO_ID',
  fullscreen: false,
  playerVars: {
    autoplay: 0,
    controls: 1,
    rel: 0
  }
});

Metode Kontrol Video

Section titled “Metode Kontrol Video”
// Play
await YoutubePlayer.playVideo(playerId);


// Pause
await YoutubePlayer.pauseVideo(playerId);


// Stop
await YoutubePlayer.stopVideo(playerId);


// Seek to time
await YoutubePlayer.seekTo(playerId, seconds, allowSeekAhead);


// Load video by ID
await YoutubePlayer.loadVideoById(playerId, { videoId: 'VIDEO_ID' });


// Cue video (load without playing)
await YoutubePlayer.cueVideoById(playerId, { videoId: 'VIDEO_ID' });

Kontrol Daftar Putar

Section titled “Kontrol Daftar Putar”
// Load playlist
await YoutubePlayer.loadPlaylist(playerId, {
  listType: 'playlist',
  list: 'PLAYLIST_ID'
});


// Cue playlist
await YoutubePlayer.cuePlaylist(playerId, {
  playlist: ['VIDEO_ID_1', 'VIDEO_ID_2'],
  index: 0
});


// Navigate playlist
await YoutubePlayer.nextVideo(playerId);
await YoutubePlayer.previousVideo(playerId);
await YoutubePlayer.playVideoAt(playerId, index);

Kontrol Audio

Section titled “Kontrol Audio”
// Mute/Unmute
await YoutubePlayer.mute(playerId);
await YoutubePlayer.unMute(playerId);


const { result } = await YoutubePlayer.isMuted(playerId);
console.log('Muted:', result.value);


// Volume (0-100)
await YoutubePlayer.setVolume(playerId, 50);
const { result } = await YoutubePlayer.getVolume(playerId);

Kontrol Pemutaran

Section titled “Kontrol Pemutaran”
// Playback rate
await YoutubePlayer.setPlaybackRate(playerId, 1.5);
const { result } = await YoutubePlayer.getPlaybackRate(playerId);


// Available rates
const { result } = await YoutubePlayer.getAvailablePlaybackRates(playerId);
console.log('Available rates:', result.value);


// Loop and shuffle
await YoutubePlayer.setLoop(playerId, true);
await YoutubePlayer.setShuffle(playerId, true);

Kontrol Kualitas

Section titled “Kontrol Kualitas”
// Set quality
await YoutubePlayer.setPlaybackQuality(playerId, 'hd720');


// Get current quality
const { result } = await YoutubePlayer.getPlaybackQuality(playerId);


// Get available qualities
const { result } = await YoutubePlayer.getAvailableQualityLevels(playerId);

Informasi Pemain

Section titled “Informasi Pemain”
// Duration
const { result } = await YoutubePlayer.getDuration(playerId);


// Current time
const { result } = await YoutubePlayer.getCurrentTime(playerId);


// Loaded fraction
const { result } = await YoutubePlayer.getVideoLoadedFraction(playerId);


// Player state
const { result } = await YoutubePlayer.getPlayerState(playerId);


// Video URL
const { result } = await YoutubePlayer.getVideoUrl(playerId);

Pendengar Acara

Section titled “Pendengar Acara”
// State change
YoutubePlayer.addEventListener(playerId, 'onStateChange', (event) => {
  console.log('State:', event.data); // -1, 0, 1, 2, 3, 5
});


// Ready
YoutubePlayer.addEventListener(playerId, 'onReady', (event) => {
  console.log('Player ready');
});


// Error
YoutubePlayer.addEventListener(playerId, 'onError', (event) => {
  console.error('Player error:', event.data);
});


// Quality change
YoutubePlayer.addEventListener(playerId, 'onPlaybackQualityChange', (event) => {
  console.log('Quality:', event.data);
});


// Rate change
YoutubePlayer.addEventListener(playerId, 'onPlaybackRateChange', (event) => {
  console.log('Rate:', event.data);
});


// Remove listener
YoutubePlayer.removeEventListener(playerId, 'onStateChange', callback);

Contoh Lengkap

Section titled “Contoh Lengkap”
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';


export class YouTubeService {
  private playerId: string | null = null;


  async initPlayer(videoId: string) {
    try {
      const { player, playerReady } = await YoutubePlayer.initialize({
        playerId: 'main-player',
        playerSize: { width: 1280, height: 720 },
        videoId,
        fullscreen: false,
        playerVars: {
          autoplay: 0,
          controls: 1,
          modestbranding: 1,
          rel: 0
        }
      });


      this.playerId = player;


      // Set up event listeners
      YoutubePlayer.addEventListener(player, 'onReady', () => {
        console.log('Player is ready');
      });


      YoutubePlayer.addEventListener(player, 'onStateChange', (event) => {
        this.handleStateChange(event.data);
      });


      YoutubePlayer.addEventListener(player, 'onError', (event) => {
        console.error('YouTube error:', event.data);
      });


      return player;
    } catch (error) {
      console.error('Failed to initialize player:', error);
      throw error;
    }
  }


  private handleStateChange(state: number) {
    switch (state) {
      case -1:
        console.log('Unstarted');
        break;
      case 0:
        console.log('Ended');
        break;
      case 1:
        console.log('Playing');
        break;
      case 2:
        console.log('Paused');
        break;
      case 3:
        console.log('Buffering');
        break;
      case 5:
        console.log('Video cued');
        break;
    }
  }


  async play() {
    if (!this.playerId) return;
    await YoutubePlayer.playVideo(this.playerId);
  }


  async pause() {
    if (!this.playerId) return;
    await YoutubePlayer.pauseVideo(this.playerId);
  }


  async loadVideo(videoId: string) {
    if (!this.playerId) return;
    await YoutubePlayer.loadVideoById(this.playerId, { videoId });
  }


  async loadPlaylist(playlistId: string) {
    if (!this.playerId) return;
    await YoutubePlayer.loadPlaylist(this.playerId, {
      listType: 'playlist',
      list: playlistId,
      index: 0
    });
  }


  async setQuality(quality: 'small' | 'medium' | 'large' | 'hd720' | 'hd1080') {
    if (!this.playerId) return;
    await YoutubePlayer.setPlaybackQuality(this.playerId, quality);
  }


  async getProgress() {
    if (!this.playerId) return { current: 0, duration: 0 };


    const current = await YoutubePlayer.getCurrentTime(this.playerId);
    const duration = await YoutubePlayer.getDuration(this.playerId);


    return {
      current: current.result.value,
      duration: duration.result.value
    };
  }


  async destroy() {
    if (!this.playerId) return;
    await YoutubePlayer.destroy(this.playerId);
    this.playerId = null;
  }
}

Status Pemain

Section titled “Status Pemain”
NegaraNilaiDeskripsi
BELUM DIMULAI-1Video tidak dimulai
BERAKHIR0Video telah berakhir
BERMAIN1Video sedang diputar
DIJEDA2Video dijeda
PENYANGGAAN3Video sedang buffering
Isyarat5Video diberi isyarat

Tingkat Kualitas

Section titled “Tingkat Kualitas”
  • small: 240p
  • medium: 360p
  • large: 480p
  • hd720: 720p
  • hd1080: 1080p
  • highres: >1080p
  • default: Kualitas otomatis

Praktik Terbaik

Section titled “Praktik Terbaik”

  1. Inisialisasi sekali Buat instance pemain satu kali dan gunakan kembali:

    let player = await YoutubePlayer.initialize(options);
    // Reuse player for different videos
    await YoutubePlayer.loadVideoById(player, { videoId: 'NEW_ID' });

  2. Tangani kesalahan dengan baik

    YoutubePlayer.addEventListener(playerId, 'onError', (event) => {
      switch (event.data) {
        case 2:
          console.error('Invalid parameter');
          break;
        case 100:
          console.error('Video not found');
          break;
        case 101:
        case 150:
          console.error('Embedding not allowed');
          break;
      }
    });

  3. Bersihkan Hancurkan pemain saat komponen dilepas:

    useEffect(() => {
      return () => {
        if (playerId) {
          YoutubePlayer.destroy(playerId);
        }
      };
    }, []);

  4. Hargai preferensi pengguna

    // Don't autoplay unless user initiated
    playerVars: {
      autoplay: 0
    }

  5. Pantau pemutaran

    setInterval(async () => {
      const time = await YoutubePlayer.getCurrentTime(playerId);
      updateProgressBar(time.result.value);
    }, 1000);

Catatan Platform

Section titled “Catatan Platform”

iOS

Section titled “iOS”
  • Bekerja pada iOS 9.0+
  • Menggunakan WKWebView dengan iframe YouTube API
  • Layar penuh didukung

Android

Section titled “Android”
  • Bekerja pada Android 5.0 (API 21)+
  • Menggunakan WebView dengan iframe YouTube API
  • Layar penuh didukung

Web

Section titled “Web”
  • Integrasi iframe YouTube langsung
  • Dukungan penuh API
  • Performa terbaik

Pemecahan masalah

Section titled “Pemecahan masalah”

Pemain tidak memuat:

  • Periksa ID video valid
  • Verifikasi koneksi internet
  • Pastikan penyematan YouTube diizinkan untuk video tersebut

Acara tidak diaktifkan:

  • Pastikan pendengar ditambahkan setelah inisialisasi
  • Periksa apakah pemutar sudah siap sebelum menambahkan pendengar

Masalah kualitas:

  • Periksa tingkat kualitas yang tersedia terlebih dahulu
  • Beberapa video tidak mendukung semua kualitas
  • Perubahan kualitas mungkin tidak terjadi secara instan