Fitur Lanjutan
Penjelasan rinci tentang fitur lanjutan dan opsi konfigurasi M3U8 Online Player.
Konfigurasi Player
Opsi Konfigurasi Dasar
Player menyediakan berbagai opsi konfigurasi untuk menyesuaikan pengalaman streaming:
Konfigurasi Autoplay
const playerConfig = {
autoplay: false, // Nonaktifkan autoplay
muted: true, // Bisu saat autoplay
preload: 'metadata', // Konfigurasi preload
};
Konfigurasi Kualitas
const qualityConfig = {
defaultQuality: 'auto', // Kualitas default
qualityLevels: [
// Level kualitas yang tersedia
{ name: '1080p', height: 1080 },
{ name: '720p', height: 720 },
{ name: '480p', height: 480 },
],
};
Konfigurasi Lanjutan
Konfigurasi Buffer
const bufferConfig = {
bufferSize: 30, // Ukuran buffer (detik)
maxBufferLength: 60, // Panjang buffer maksimum
minBufferLength: 5, // Panjang buffer minimum
bufferForPlayback: 10, // Buffer sebelum pemutaran
};
Konfigurasi Jaringan
const networkConfig = {
timeout: 10000, // Timeout (milidetik)
retryAttempts: 3, // Jumlah percobaan ulang
retryDelay: 1000, // Penundaan percobaan ulang
maxBandwidth: 5000000, // Bandwidth maksimum (bps)
};
Analisis Streaming
Statistik Real-time
Player menyediakan statistik streaming yang detail:
Metrik Performa
// Mendapatkan informasi statistik
const stats = player.getStats();
console.log({
bitrate: stats.bitrate, // Bitrate saat ini
resolution: stats.resolution, // Resolusi saat ini
fps: stats.fps, // Frame rate
droppedFrames: stats.droppedFrames, // Frame yang terlewat
bufferHealth: stats.bufferHealth, // Kesehatan buffer
});
Statistik Jaringan
const networkStats = player.getNetworkStats();
console.log({
downloadSpeed: networkStats.downloadSpeed, // Kecepatan download
latency: networkStats.latency, // Latensi
packetLoss: networkStats.packetLoss, // Tingkat kehilangan paket
connectionType: networkStats.connectionType, // Jenis koneksi
});
Analisis Kualitas
Metrik Kualitas
// Memulai analisis kualitas
player.startQualityAnalysis();
// Memantau event kualitas
player.on('qualitychange', (data) => {
console.log('Perubahan kualitas:', {
from: data.from,
to: data.to,
reason: data.reason,
timestamp: data.timestamp,
});
});
Penanganan Error
Penanganan Error Lanjutan
Klasifikasi Error
// Mengklasifikasikan tipe error
const errorTypes = {
NETWORK_ERROR: 'network',
DECODE_ERROR: 'decode',
MANIFEST_ERROR: 'manifest',
SEGMENT_ERROR: 'segment',
};
// Mengonfigurasi error handler
player.on('error', (error) => {
switch (error.type) {
case errorTypes.NETWORK_ERROR:
handleNetworkError(error);
break;
case errorTypes.DECODE_ERROR:
handleDecodeError(error);
break;
default:
handleGenericError(error);
}
});
Fungsi Pemulihan Otomatis
const recoveryConfig = {
autoRetry: true, // Retry otomatis
maxRetries: 3, // Jumlah retry maksimum
retryDelay: 2000, // Penundaan retry
fallbackQuality: '480p', // Kualitas fallback
emergencyMode: true, // Mode darurat
};
Monitoring Error
Logging Error
// Konfigurasi logging error
const errorLogger = {
logLevel: 'error',
logToConsole: true,
logToServer: true,
logToLocalStorage: true,
};
// Mendapatkan statistik error
const errorStats = player.getErrorStats();
console.log({
totalErrors: errorStats.total,
errorRate: errorStats.rate,
lastError: errorStats.last,
errorHistory: errorStats.history,
});
Optimasi Performa
Manajemen Memori
Monitoring Penggunaan Memori
// Monitoring penggunaan memori
const memoryMonitor = {
enabled: true,
threshold: 100 * 1024 * 1024, // 100MB
cleanupInterval: 30000, // 30 detik
maxMemoryUsage: 200 * 1024 * 1024, // 200MB
};
// Pembersihan memori
player.on('memorywarning', () => {
player.cleanupMemory();
console.log('Pembersihan memori dijalankan');
});
Manajemen Resource
// Konfigurasi manajemen resource
const resourceConfig = {
maxConcurrentRequests: 6, // Jumlah request bersamaan maksimum
requestTimeout: 10000, // Timeout request
cacheSize: 50 * 1024 * 1024, // Ukuran cache
cleanupOnPause: true, // Pembersihan saat pause
};
Optimasi Buffer
Buffer Adaptif
const adaptiveBufferConfig = {
enabled: true,
minBuffer: 5, // Buffer minimum
maxBuffer: 30, // Buffer maksimum
targetBuffer: 10, // Buffer target
bufferAdjustment: 0.1, // Tingkat penyesuaian buffer
};
UI Kustom
Kustomisasi UI
Kontrol Kustom
// Membuat kontrol kustom
const customControls = {
playButton: {
icon: 'custom-play-icon',
position: 'center',
size: 'large',
},
volumeSlider: {
orientation: 'vertical',
position: 'right',
width: 8,
},
progressBar: {
height: 6,
color: '#ff6b6b',
bufferColor: '#4ecdc4',
},
};
Konfigurasi Tema
const themeConfig = {
primaryColor: '#ff6b6b',
secondaryColor: '#4ecdc4',
backgroundColor: '#2c3e50',
textColor: '#ecf0f1',
borderRadius: 8,
fontSize: 14,
};
Desain Responsif
Konfigurasi Breakpoint
const responsiveConfig = {
breakpoints: {
mobile: 768,
tablet: 1024,
desktop: 1200,
},
controls: {
mobile: ['play', 'volume', 'fullscreen'],
tablet: ['play', 'volume', 'progress', 'fullscreen'],
desktop: ['play', 'volume', 'progress', 'quality', 'fullscreen'],
},
};
Monitoring Event
Sistem Event
Event Kustom
// Mendefinisikan event kustom
const customEvents = {
qualitychange: 'Perubahan kualitas',
bufferwarning: 'Peringatan buffer',
networkchange: 'Perubahan jaringan',
userinteraction: 'Interaksi pengguna',
};
// Mengonfigurasi event listener
player.on('qualitychange', (data) => {
console.log('Kualitas diubah:', data);
});
player.on('bufferwarning', (data) => {
console.log('Peringatan buffer:', data);
// Penanganan peringatan
});
Statistik Event
// Mendapatkan statistik event
const eventStats = player.getEventStats();
console.log({
totalEvents: eventStats.total,
eventTypes: eventStats.types,
eventFrequency: eventStats.frequency,
lastEvent: eventStats.last,
});
Tools Debug
Mode Debug
// Mengaktifkan mode debug
const debugConfig = {
enabled: true,
logLevel: 'debug',
showStats: true,
showNetworkInfo: true,
showBufferInfo: true,
};
// Menampilkan informasi debug
player.enableDebugMode(debugConfig);
Profil Performa
// Profil performa
const profiler = {
enabled: true,
sampleRate: 1000, // Tingkat sampling (milidetik)
metrics: ['cpu', 'memory', 'network'],
exportFormat: 'json',
};
// Mendapatkan hasil profil
const profile = player.getProfile();
console.log('Profil performa:', profile);
Integrasi Lanjutan
Integrasi API
Integrasi dengan API Eksternal
// Integrasi dengan API eksternal
const apiIntegration = {
analytics: {
enabled: true,
endpoint: '/api/analytics',
events: ['play', 'pause', 'seek', 'qualitychange'],
},
recommendations: {
enabled: true,
endpoint: '/api/recommendations',
triggerEvents: ['ended', 'error'],
},
};
Sistem Autentikasi
// Integrasi sistem autentikasi
const authConfig = {
enabled: true,
tokenEndpoint: '/api/auth/token',
refreshEndpoint: '/api/auth/refresh',
tokenExpiry: 3600000, // 1 jam
autoRefresh: true,
};
Sistem Plugin
Plugin Kustom
// Membuat plugin kustom
class CustomPlugin {
constructor(player) {
this.player = player;
this.init();
}
init() {
this.player.on('ready', () => {
this.setupCustomFeatures();
});
}
setupCustomFeatures() {
// Implementasi fitur kustom
}
}
// Mendaftarkan plugin
player.registerPlugin('custom', CustomPlugin);
Fitur-fitur lanjutan ini memungkinkan M3U8 Online Player untuk disesuaikan dengan berbagai kasus penggunaan dan memberikan pengalaman streaming yang optimal.