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 informasi1
: HAVE_METADATA - Dengan metadata2
: HAVE_CURRENT_DATA - Dengan data frame saat ini3
: HAVE_FUTURE_DATA - Dengan data frame masa depan4
: HAVE_ENOUGH_DATA - Dengan data yang cukup
networkState()
Mendapatkan status jaringan.
const networkState = player.networkState();
Nilai kembali:
0
: NETWORK_EMPTY - Status awal1
: NETWORK_IDLE - Status tidak aktif2
: NETWORK_LOADING - Memuat3
: 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 eventcallback
(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.