Programing

Cara Membuat Website Live Streaming Menggunakan HTML dan HLS.js

4 min read
avatar
Super User

Jika Anda tertarik untuk membuat website yang memungkinkan pengunjung menonton siaran langsung (live streaming) melalui browser, tutorial ini akan menunjukkan cara membuatnya menggunakan HTML dan teknologi HLS (HTTP Live Streaming). Dengan menggunakan kode yang akan dijelaskan di bawah ini, Anda bisa membuat platform TV online sederhana yang dapat menampilkan video secara langsung.

Langkah-langkah Membuat Website TV Online

1. Membuat Struktur HTML

Struktur dasar dari halaman HTML ini sangat sederhana. Dalam tag <body>, kita hanya memiliki elemen <video> yang akan digunakan untuk menampilkan stream video. Pada kode berikut, kami mengatur elemen video untuk dapat memutar stream dari sumber HLS yang akan dimuat secara dinamis.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tv Online</title>
</head>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
    }

    video {
        width: 100%;
        max-width: 600px;
        border: 1px solid #ccc;
    }
</style>

<body>

<video id="video" controls></video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    const video = document.getElementById('video');
    const videoSrc = 'https://dmithrvllta.cdn.mgmlcdn.com/dubairacing/smil:dubairacing.smil/chunklist_b1500000.m3u8';

    if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // This is for Safari and iOS devices
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', function () {
            video.play();
        });
    }
</script>

</body>
</html>
2. Penjelasan Kode

Berikut adalah penjelasan bagian-bagian utama dari kode yang telah diberikan:

  • HTML Struktur:
    • <meta charset="utf-8"> dan <meta name="viewport" content="width=device-width, initial-scale=1"> memastikan bahwa halaman ini responsif di berbagai perangkat dan kompatibel dengan karakter set yang tepat.
    • Elemen <video id="video" controls> adalah tempat dimana video akan ditampilkan. Dengan menambahkan atribut controls, pengguna dapat mengontrol video, seperti play, pause, dan volume.
  • CSS Styling:
    • Menggunakan Flexbox untuk memastikan konten (video player) berada di tengah layar secara vertikal dan horizontal.
    • max-width: 600px; memastikan bahwa ukuran video tidak melebihi 600px, memberikan tampilan yang baik di desktop dan perangkat mobile.
  • Script JavaScript untuk Live Streaming:
    • HLS.js: HLS.js adalah library JavaScript yang digunakan untuk mendukung pemutaran video berbasis HLS di browser yang tidak mendukungnya secara langsung (seperti Chrome, Firefox, dan Edge).
    • Cek dukungan HLS: Bagian pertama dari script memeriksa apakah HLS didukung oleh browser menggunakan Hls.isSupported(). Jika didukung, kita akan memuat dan menghubungkan sumber video ke elemen <video>.
    • Sumber Video: Video yang akan diputar diambil dari URL HLS (videoSrc). Ini adalah stream live yang berformat .m3u8, yang dapat mengalirkan video secara real-time.
    • Safari dan iOS Compatibility: Safari dan perangkat iOS memiliki dukungan HLS bawaan, jadi jika pengguna menggunakan browser ini, kita langsung menetapkan video.src ke URL stream.
3. Penyesuaian dan Implementasi
  • Sumber Video: URL sumber video (videoSrc) yang digunakan pada kode ini adalah sebuah URL stream dari siaran langsung balapan di Dubai. Anda bisa mengganti URL ini dengan URL stream HLS yang sesuai dengan kebutuhan Anda, apakah itu siaran langsung acara TV, webinar, atau stream lainnya.
  • Tampilan dan Fungsi: Anda dapat menyesuaikan tampilan lebih lanjut menggunakan CSS, misalnya dengan mengubah warna, menambahkan logo, atau kontrol lebih lanjut untuk pengguna. Pastikan untuk memastikan bahwa platform tempat Anda meng-host stream mendukung HLS (seperti AWS MediaLive, Wowza, atau platform streaming lainnya).
4. Kelebihan Menggunakan HLS
  • Kompatibilitas: Dengan menggunakan HLS.js, Anda dapat memastikan bahwa video Anda dapat diputar di berbagai browser tanpa perlu plugin tambahan.
  • Streaming Real-time: HLS memungkinkan streaming video secara real-time, yang penting untuk acara langsung atau konten yang membutuhkan pemutaran secara langsung.
  • Skalabilitas: Teknologi HLS memungkinkan Anda untuk menyesuaikan kualitas video yang ditampilkan berdasarkan kecepatan koneksi internet pengguna, memberikan pengalaman menonton yang lebih baik.

Dengan menggunakan kode HTML sederhana dan HLS.js, Anda dapat membuat website TV online yang mendukung live streaming. Teknologi ini memungkinkan Anda untuk menyiarkan konten video secara langsung kepada pengunjung situs Anda tanpa perlu aplikasi khusus, cukup dengan browser modern. Anda bisa mengganti URL stream sesuai dengan konten yang ingin Anda tampilkan dan menyesuaikan tampilan agar lebih menarik.

avatar
Super User

1 Comment

author
Sample Name
17 Januari 2025

thank you bang

Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *