Implementasi HLS.js di Vue.js

HLS.js adalah sebuah pustaka JavaScript yang mengimplementasikan HTTP Live Streaming.

Unduh pustakanya dengan menggunakan npm:

npm install --save hls.js

Di sini aku menggunakan Laravel dan Inertia.js untuk memudahkan mengembangkan app dengan Vue.js. Untuk script-nya sendiri, bisa seperti di bawah ini:

<script setup>
import { onMounted, ref } from 'vue';
import Hls from 'hls.js';

const props = defineProps({
    url: String
});

const video = ref(null);

onMounted(() => {
    const hls = new Hls();
    hls.loadSource(props.url);
    hls.attachMedia(video.value);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.value.play();
    });
});
</script>

<template>
    <video ref="video" class="w-full" controls />
</template>