💡 ULASAN & REFERENSI • DIPERBARUI: 25 October 2026 • REDAKSI AZWINN

Kode Javascript Hls Js Player: Implementasi & Konfigurasi

Implementasi pemutaran video HTTP Live Streaming (HLS) di browser web modern tanpa dukungan pemutar bawaan (seperti Safari) memerlukan pustaka JavaScript pihak ketiga yang andal, yaitu Hls.js. Pustaka open-source ini menggunakan ekstensi Media Source Extensions (MSE) untuk memutar aliran video HLS secara mulus melalui elemen HTML5 <video>.

Di bawah ini adalah kode implementasi dasar menggunakan Hls.js beserta penjelasan komponen teknis dan tabel konfigurasi parameter yang sering digunakan dalam pengembangan web.

Contoh Kode Implementasi Dasar Hls.js

Salin kode HTML dan JavaScript berikut ke dalam halaman web Anda untuk memulai pemutaran stream HLS (.m3u8):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hls.js Demo</title>
</head>
<body>

    <!-- Elemen Video HTML5 -->
    <video id="video" controls width="640" height="360"></video>

    <!-- Memuat Hls.js dari CDN resmi -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

    <script>
      var video = document.getElementById('video');
      var videoSrc = 'https://test-streams.mux.dev/x364xhls/ptu.m3u8';
      
      if (Hls.isSupported()) {
        var hls = new Hls();
        // Memuat sumber video HLS
        hls.loadSource(videoSrc);
        // Menghubungkan HLS ke elemen video HTML5
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
          video.play();
        });
      }
      // Penanganan khusus untuk browser yang mendukung HLS secara natif (misal: Safari)
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', function() {
          video.play();
        });
      }
    </script>

</body>
</html>

Parameter Konfigurasi Utama Hls.js

Saat membuat instance baru dari Hls(), Anda dapat meneruskan objek konfigurasi untuk mengatur perilaku buffer, pemulihan error, dan batas bandwidth. Berikut adalah tabel parameter konfigurasi yang sering digunakan:

Parameter Konfigurasi Tipe Data Nilai Default Deskripsi Fungsi
autoStartLoad Boolean true Menentukan apakah pemuatan stream dimulai secara otomatis setelah inisialisasi.
startLevel Integer -1 Indeks kualitas awal (-1 berarti otomatis berdasarkan estimasi bandwidth awal).
maxBufferSize Integer 60 * 1000 * 1000 (60 MB) Batas maksimum ukuran buffer dalam memori sebelum pemuatan dihentikan sementara.
maxBufferLength Integer 30 (detik) Jumlah maksimum buffer video dalam detik yang ingin dipertahankan di depan posisi pemutaran.
liveSyncDurationCount Integer 3 Target jarak segmen dari tepi langsung (live edge) untuk siaran langsung (live streaming).

Langkah-Langkah Implementasi Teknis

  1. Sertakan Pustaka: Masukkan skrip CDN Hls.js versi terbaru ke dalam dokumen HTML Anda atau instal melalui manajer paket menggunakan perintah npm install hls.js.
  2. Siapkan Tag Video: Buat elemen <video> dengan atribut kontrol standar agar pengguna dapat mengatur volume, jeda, dan layar penuh.
  3. Deteksi Dukungan MSE: Gunakan fungsi Hls.isSupported() untuk memeriksa apakah browser mendukung Media Source Extensions. Jika tidak, sediakan jalur alternatif untuk browser seperti Safari yang mendukung HLS secara natif.
  4. Inisialisasi & Hubungkan: Buat objek new Hls(), panggil method loadSource() dengan tautan file .m3u8, lalu ikat ke elemen video menggunakan attachMedia().

Troubleshooting Lapangan

Kendala umum saat menerapkan Hls.js biasanya berkaitan dengan kebijakan CORS (Cross-Origin Resource Sharing) pada server penyimpanan file .m3u8 dan segmen .ts. Pastikan server media Anda mengizinkan header akses silang (Access-Control-Allow-Origin: *). Selain itu, pastikan tautan stream menggunakan protokol HTTPS jika halaman web utama diakses melalui HTTPS guna menghindari kesalahan konten campuran (mixed content error).

🔍 Orang Lain Juga Mencari Ini