# HLS.js Video Component with Customized UI for Vue


This component is built on the [HLS.js](https://www.npmjs.com/package/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

```sh

npm  i  mediaquad-video-component

```

  

### Usage

Add `app.use(Player)` to main.js
  

```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
```js
import { Player } from  'mediaquad-video-component'
import  'mediaquad-video-component/dist/mediaquad-video-component.css'
```

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

### Props Reference
```ts
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
}
```