HLS.js Video Component with Customized UI for Vue

This component is built on the HLS.js library, which adds support for m3u8 file formats to enable HTTP Live Streaming.

Features

• Support for m3u8, mp4, and webm file formats

• Custom preview image

• Display title and subtitle

• Playlists

• Color customization

• Button customization

• Keyboard shortcuts

• Playback speed control

Installation

npm  i  mediaquad-video-component

Usage

Add app.use(Player) to main.js

import { createApp } from  'vue'
import App from  './App.vue'
import  './index.css'
import Player from  'mediaquad-video-component'
const  app  =  createApp(App)
app.use(Player)
app.mount('#app')

Import component

import { Player } from  'mediaquad-video-component'
import  'mediaquad-video-component/dist/mediaquad-video-component.css'

Usage component

<Player :playlist="playlist" :buttons="buttons" :colors="colors" :remove-borders="true" :default-volume="0" />

Props Reference

enum  autoStartOps {
Always  =  'Always',
Never  =  'Never',
}

// Playlist item
class  playlistItem {
source:  string  =  ''
poster:  string  =''
title:  string  =''
subTitle:  string  =''
}

// Player colors
interface  colors {
buttonColor:  string
activeRangeColor:  string
backgroundColor:  string
preloadColor:  string
textColor:  string
}

// Visible buttons
class  playerButtons {
playBtn:  boolean  =  true
prevNbtn:  boolean  =  true
skipNbtn:  boolean  =  true
speedBtn:  boolean  =  true
nextChapterBtn:  boolean  =  true
prevChapterBtn:  boolean  =  true
volumeBtn:  boolean  =  true
timer:  boolean  =  true
pipBtn:  boolean  =  true
fullscreenBtn:  boolean  =  true
autoplayBtn:  boolean  =  true
playlistBtn:  boolean  =  true
}

// Other options
class  playerOptions {
showProgress:  boolean  =  true
autoStart:  autoStartOps  = autoStartOps.Always
defaultVolume:  number  =  1.0
removeBorders:  boolean  =  false
autoPlaylist:  boolean  =  false
skipStep:  number  =  5.0
}