mediaquad-video-component v0.0.10

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
}