Playlist

Playlist represents a list of videos that can be played and observed, with build-in support for video loading and pagination. This is the recommended way of fetching and playing videos through our player.

To create video playlist you simply need to initialize a new instance:

const playlist = new Playlist()

This playlist will load all videos from the current application. When you initialize it, it will load the first page of videos.

More examples of different playlists:

// Playlist of videos with specific tag and metadata
new Playlist({
  tags: ['cat'],
  metadata: {
    'breed': 'persian'
  }
})

// Playlist of specific user's videos
new Playlist({
  identity: 'Daniel'
})

// Playlist of specific videos loaded by id
new Playlist({
  videoIds: [
    '1a073e79-82d0-4d09-8640-44faa6ac0906',
    '5fba1709-5cd5-4fb3-9b77-7987d550f9f3'
  ]
})

// Playlist with specific videos
new Playlist({
  videos: [
    video
  ]
})

To load the next page of videos you can call loadMoreVideos.

playlist.loadMoreVideos()

// Or 

playlist.loadMoreVideos(nextPageVideos => {
  // Next bunch of video was loaded
})

// Or 

const nextPageVideos = await playlist.loadMoreVideos()

Playlist instance has a totalCount property with the total number of all videos from this playlist. It could be useful to check if there are more videos to load or if the playlist is fully loaded.

if (playlist.totalCount > playlist.videos.length) {
  // There is more videos to load
}

To get a video from a playlist you can do following:

// Get video by id
const video = playlist.getVideoBy(videoId)

// Get video at index in playlist
const video = playlist.getVideoAt(2)

// Get all loaded videos directly
const videos = playlist.videos

You could also add or remove videos from the playlist:

// Add list of videos to the end of playlist
playlist.addVideos([video1, video2])

// Add video to the beginning of playlist
playlist.addVideos([video], 0)

// Remove video from playlist by id
playlist.removeVideo(videoId)

You could also subscribe to updates of playlist videos.

playlist.subscribe('videosUpdated', (event, videos) => {
  // Videos was updated
})