w

Referensi API

Referensi API lengkap untuk Player M3U8 Online.

API Player

Inisialisasi

Konstruktor Player

const player = new M3U8Player(options);

Parameter:

  • options (Object): Opsi konfigurasi player

Opsi konfigurasi:

const options = {
  container: '#player', // Selektor kontainer player
  autoplay: false, // Pemutaran otomatis
  muted: true, // Status bisu
  preload: 'metadata', // Pengaturan pra-muat
  width: '100%', // Lebar player
  height: 'auto', // Tinggi player
  controls: true, // Tampilkan kontrol
  fluid: true, // Responsif
  responsive: true, // Dukungan responsif
  playbackRates: [0.5, 1, 1.25, 1.5, 2], // Kecepatan pemutaran
  defaultPlaybackRate: 1, // Kecepatan pemutaran default
  language: 'id', // Pengaturan bahasa
  techOrder: ['html5'], // Urutan prioritas teknologi
  html5: {
    vhs: {
      overrideNative: true, // Ganti HLS asli
      enableLowInitialPlaylist: true,
      smoothQualityChange: true,
      handlePartialData: true,
    },
  },
};

Metode

load()

Memuat stream.

player.load(url);

Parameter:

  • url (String): URL stream M3U8

Nilai kembali:

  • Promise: Promise pemuatan selesai

Contoh:

try {
  await player.load('https://example.com/stream.m3u8');
  console.log('Stream berhasil dimuat');
} catch (error) {
  console.error('Error memuat stream:', error);
}

play()

Memulai pemutaran.

player.play();

Nilai kembali:

  • Promise: Promise mulai pemutaran

pause()

Menjeda pemutaran.

player.pause();

currentTime()

Mendapatkan atau mengatur waktu pemutaran saat ini.

// Dapatkan waktu saat ini
const currentTime = player.currentTime();

// Atur waktu
player.currentTime(120); // Atur ke 2 menit

duration()

Mendapatkan durasi total stream.

const duration = player.duration();

volume()

Mendapatkan atau mengatur volume.

// Dapatkan volume (0.0 - 1.0)
const volume = player.volume();

// Atur volume
player.volume(0.5); // Atur ke 50%

muted()

Mendapatkan atau mengatur status bisu.

// Dapatkan status bisu
const isMuted = player.muted();

// Atur status bisu
player.muted(true); // Bisu
player.muted(false); // Tidak bisu

paused()

Mendapatkan status jeda.

const isPaused = player.paused();

ended()

Mendapatkan status selesai.

const isEnded = player.ended();

readyState()

Mendapatkan status siap player.

const readyState = player.readyState();

Nilai kembali:

  • 0: HAVE_NOTHING - Tidak ada informasi
  • 1: HAVE_METADATA - Dengan metadata
  • 2: HAVE_CURRENT_DATA - Dengan data frame saat ini
  • 3: HAVE_FUTURE_DATA - Dengan data frame masa depan
  • 4: HAVE_ENOUGH_DATA - Dengan data yang cukup

networkState()

Mendapatkan status jaringan.

const networkState = player.networkState();

Nilai kembali:

  • 0: NETWORK_EMPTY - Status awal
  • 1: NETWORK_IDLE - Status tidak aktif
  • 2: NETWORK_LOADING - Memuat
  • 3: NETWORK_NO_SOURCE - Tidak ada sumber

Event

loadstart

Dipicu saat pemuatan stream dimulai.

player.on('loadstart', () => {
  console.log('Pemuatan stream dimulai');
});

loadedmetadata

Dipicu saat metadata dimuat.

player.on('loadedmetadata', () => {
  console.log('Metadata dimuat');
  console.log('Durasi:', player.duration());
});

loadeddata

Dipicu saat frame pertama dimuat.

player.on('loadeddata', () => {
  console.log('Frame pertama dimuat');
});

canplay

Dipicu saat pemutaran memungkinkan.

player.on('canplay', () => {
  console.log('Siap diputar');
});

canplaythrough

Dipicu saat buffering selesai dan pemutaran sampai akhir memungkinkan.

player.on('canplaythrough', () => {
  console.log('Siap diputar sampai akhir');
});

play

Dipicu saat pemutaran dimulai.

player.on('play', () => {
  console.log('Pemutaran dimulai');
});

pause

Dipicu saat pemutaran dijeda.

player.on('pause', () => {
  console.log('Pemutaran dijeda');
});

ended

Dipicu saat pemutaran selesai.

player.on('ended', () => {
  console.log('Pemutaran selesai');
});

timeupdate

Dipicu saat waktu pemutaran diperbarui.

player.on('timeupdate', () => {
  const currentTime = player.currentTime();
  const duration = player.duration();
  const progress = (currentTime / duration) * 100;
  console.log(`Kemajuan: ${progress.toFixed(1)}%`);
});

volumechange

Dipicu saat volume berubah.

player.on('volumechange', () => {
  console.log('Volume:', player.volume());
  console.log('Bisu:', player.muted());
});

error

Dipicu saat terjadi error.

player.on('error', (error) => {
  console.error('Error player:', error);
});

API HLS

Properti

hls

Akses ke instance HLS.

const hls = player.hls;

hls.levels

Mendapatkan level kualitas yang tersedia.

const levels = player.hls.levels;
console.log('Level kualitas tersedia:', levels);

hls.currentLevel

Mendapatkan atau mengatur level kualitas saat ini.

// Dapatkan level saat ini
const currentLevel = player.hls.currentLevel;

// Atur level
player.hls.currentLevel = 2; // Atur ke level ketiga

hls.nextLevel

Mendapatkan atau mengatur level kualitas berikutnya.

const nextLevel = player.hls.nextLevel;

hls.loadLevel

Mendapatkan level kualitas yang sedang dimuat.

const loadLevel = player.hls.loadLevel;

hls.bandwidth

Mendapatkan bandwidth yang diperkirakan.

const bandwidth = player.hls.bandwidth;
console.log('Bandwidth diperkirakan:', bandwidth, 'bps');

hls.startLevel

Mendapatkan atau mengatur level kualitas awal.

// Atur level awal
player.hls.startLevel = 1;

Metode

hls.startLoad()

Memulai pemuatan HLS.

player.hls.startLoad();

hls.stopLoad()

Menghentikan pemuatan HLS.

player.hls.stopLoad();

hls.swapAudioCodec()

Menukar codec audio.

player.hls.swapAudioCodec();

hls.recoverMediaError()

Mencoba pulih dari error media.

player.hls.recoverMediaError();

Event

hlsEvent

Memantau event terkait HLS.

player.on('hlsEvent', (event, data) => {
  console.log('Event HLS:', event, data);
});

levelLoaded

Dipicu saat level kualitas dimuat.

player.on('levelLoaded', (event, data) => {
  console.log('Level kualitas dimuat:', data);
});

levelSwitched

Dipicu saat level kualitas berubah.

player.on('levelSwitched', (event, data) => {
  console.log('Level kualitas berubah:', data);
});

fragLoaded

Dipicu saat fragmen dimuat.

player.on('fragLoaded', (event, data) => {
  console.log('Fragmen dimuat:', data);
});

API Event

Menambah Event Listener

on()

Menambah event listener.

player.on('eventName', callback);

Parameter:

  • eventName (String): Nama event
  • callback (Function): Fungsi callback

off()

Menghapus event listener.

player.off('eventName', callback);

one()

Menambah event listener yang hanya dijalankan sekali.

player.one('eventName', callback);

trigger()

Memicu event secara manual.

player.trigger('customEvent', data);

Event Kustom

qualitychange

Dipicu saat kualitas berubah.

player.on('qualitychange', (event, data) => {
  console.log('Perubahan kualitas:', {
    from: data.from,
    to: data.to,
    reason: data.reason,
  });
});

bufferwarning

Dipicu saat buffer rendah.

player.on('bufferwarning', (event, data) => {
  console.log('Peringatan buffer:', data);
});

Penanganan Error

Jenis Error

MediaError

Error terkait media.

player.on('error', (error) => {
  if (error.code === 1) {
    console.log('Error media: Dibatalkan');
  } else if (error.code === 2) {
    console.log('Error media: Jaringan');
  } else if (error.code === 3) {
    console.log('Error media: Dekode');
  } else if (error.code === 4) {
    console.log('Error media: Sumber tidak didukung');
  }
});

HlsError

Error terkait HLS.

player.on('error', (error) => {
  if (error.type === 'networkError') {
    console.log('Error jaringan');
  } else if (error.type === 'mediaError') {
    console.log('Error media');
  }
});

Pemulihan Error

Pemulihan Otomatis

Player secara otomatis mencoba pulih dari error.

player.on('error', (error) => {
  console.log('Error terjadi:', error);
  // Player secara otomatis mencoba pulih
});

Pemulihan Manual

Anda dapat mencoba pulih dari error secara manual.

player.on('error', (error) => {
  if (error.type === 'mediaError') {
    // Untuk error media, coba pemulihan manual
    player.hls.recoverMediaError();
  }
});

Fungsi Utilitas

Format Waktu

formatTime()

Mengkonversi detik ke format waktu.

function formatTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`;
  }
}

// Contoh penggunaan
const currentTime = player.currentTime();
console.log('Waktu saat ini:', formatTime(currentTime));

Manajemen Level Kualitas

getQualityLevels()

Mendapatkan level kualitas yang tersedia.

function getQualityLevels() {
  return player.hls.levels.map((level, index) => ({
    index: index,
    height: level.height,
    width: level.width,
    bitrate: level.bitrate,
    name: `${level.height}p`,
  }));
}

const qualityLevels = getQualityLevels();
console.log('Level kualitas tersedia:', qualityLevels);

setQualityLevel()

Mengatur level kualitas.

function setQualityLevel(levelIndex) {
  if (levelIndex >= 0 && levelIndex < player.hls.levels.length) {
    player.hls.currentLevel = levelIndex;
    console.log(`Level kualitas diatur ke ${levelIndex}`);
  } else {
    console.error('Level kualitas tidak valid');
  }
}

Referensi API ini memungkinkan Anda memanfaatkan semua fitur Player M3U8 Online.

Apakah halaman ini membantu?