Skip to content

JavaScript library for HLS player powered by hls.js.

Notifications You must be signed in to change notification settings

tapioca24/moody-blues

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

moody-blues

moody-blues is a JavaScript library for HLS player powered by hls.js.
It has the following features.

  • Playlist support
  • Native playback support
  • Easy media operation

Installation

npm install moody-blues

Usage

<video id="hls-player" />
const video = document.getElementById('hls-player')
const player = new MoodyBlues(video, {
  debug: true,
  clips: [{
    source: 'https://example.com/playlist.m3u8',
    start: 10
  }]
})

Media operations

There are the following methods for operating media.

Operation Description
play(clips) Play one or more clips.
If there is more than one, specify an array of clip objects.
addClips(clips) Add one or more clips to the end of the playlist.
If there is more than one, specify an array of clip objects.
resume() Resume playback.
pause() Pauses playback.
seek(time) Seek to the specified number of seconds.
volume(level) Changes the volume to the specified value.
level is a value between 0 and 1.
mute(muted) Change the muted state.
muted is a boolean value.
speed(rate) Change the playback speed.

Clip object

The clip object has the following properties:

Property Type Required Description
source String x Specify the HLS source URL.
start Number Specify the number of seconds to start playback.

You can also add arbitrary properties.

Options

Configration parameters could be provided upon instantiation of MoodyBlues object.

Option Type Default Description
debug boolean false Outputs MoodyBlues logs to the console.
useNativeWheneverPossible boolean false Use native HLS playback if possible.
clips Clip object, Array of clip object undefined Play the specified clip when ready.
hlsConfig hlsConfig object undefined hls.js configration

Events

MoodyBlues fires a bunch of events, that could be registered and unregistered as below:

const onProgress = (time) => {
  console.log(time)
}

// subscribe event
player.on(MoodyBlues.Events.Progress, onProgress)
// unsubscribe event
player.off(MoodyBlues.Events.Progress, onProgress)
// subscribe for a single event call only
player.once(MoodyBlues.Events.Progress, onProgress)
Event Data Description
MoodyBlues.Events.Finish Sent when playback completes.
MoodyBlues.Events.Ready The media's metadata has finished loading.
MoodyBlues.Events.Pause Sent when the playback state is changed to paused.
MoodyBlues.Events.Resume Sent when the playback state is no longer paused.
MoodyBlues.Events.Buffer ranges: TimeRanges Sent periodically to inform interested parties of progress downloading the media.
MoodyBlues.Events.Speed rate: number Sent when the playback speed changes.
MoodyBlues.Events.Seek time: number Sent when a seek operation completes.
MoodyBlues.Events.Progress time: number The time indicated by the element's currentTime attribute has changed.
MoodyBlues.Events.Volume { volume: number, muted: boolean } Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
MoodyBlues.Events.Error `{ type: MoodyBlues.EventTypes, details: string undefined, fatal: boolean }`

Errors

Each error is categorized by:

  • type:
    • MoodyBlues.ErrorTypes.NetworkError for network related errors
    • MoodyBlues.ErrorTypes.MediaError for media/video related errors
    • MoodyBlues.ErrorTypes.OtherError for all other errors
  • details:
    • errors details