HLS Video Player HTML5: Cara Putar Live Streaming & MP4

HTTP Live Streaming (HLS) adalah protokol komunikasi streaming berbasis HTTP yang dikembangkan oleh Apple. Karena browser desktop seperti Google Chrome dan Mozilla Firefox tidak secara native mendukung pemutaran format .m3u8 (HLS) secara penuh tanpa ekstensi tambahan (kecuali Safari dan platform mobile tertentu), pengembang web wajib menggunakan library JavaScript tambahan atau elemen HTML5 video dengan integrasi ekstensi Media Source Extensions (MSE).

Untuk menerapkan HLS video player berbasis HTML5 di situs web, pendekatan paling handal adalah menggunakan pemutar open-source yang mendeteksi dukungan native browser. Jika browser tidak mendukung HLS secara native (seperti Chrome di desktop), library seperti Hls.js akan mengambil alih untuk melakukan remuxing segmen MPEG-TS ke dalam bentuk BufferSource yang dapat dimainkan oleh elemen <video> HTML5.

Perbandingan Library HLS Video Player HTML5

Berikut adalah matriks komparasi library populer yang sering digunakan untuk membangun pemutar video HLS di lingkungan produksi web modern:

Implementasi Dasar Menggunakan Hls.js dan HTML5 Video

Cara paling langsung dan efisien untuk memutar file berekstensi .m3u8 pada browser yang tidak mendukung HLS secara native adalah dengan menggabungkan tag <video> standar dengan script Hls.js melalui CDN.

<!-- Masukkan elemen video HTML5 -->
<video id="video" controls width="100%" height="auto"></video>

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

<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }
  // Fallback untuk Safari atau browser yang mendukung HLS secara native
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    video.addEventListener('loadedmetadata', function() {
      video.play();
    });
  }
</script>

Langkah-Langkah Troubleshooting Masalah Pemutaran HLS

Ketika membangun pemutar video berbasis HLS, beberapa kendala umum sering ditemukan di sisi klien maupun server:

1. Masalah CORS (Cross-Origin Resource Sharing): Pastikan server tempat file manifest .m3u8 dan segmen .ts disimpan memiliki header CORS yang mengizinkan domain web Anda (misalnya: Access-Control-Allow-Origin: *).
2. Format MIME Server: Server web (Nginx, Apache, atau S3 storage) harus dikonfigurasi untuk mengenali ekstensi .m3u8 sebagai application/vnd.apple.mpegurl dan file segmen sebagai video/mp2t atau binary/octet-stream.
3. Kecocokan Buffer: Jika video sering terhenti di tengah jalan (buffering), periksa kestabilan bitrate chunk pada file manifest atau turunkan target fragment duration menjadi 2 hingga 6 detik pada saat proses transcode encoder.