Playlist#

It is a standalone utility for managing video playlists in applications using Video.js. It provides functionality to handle playlist items, manage navigation, repeat/shuffle functionality, and trigger custom events when the playlist state changes.

Initialization#

To enable plugin need to add in following option:

window.initPlayer('my-video', {
  playlistPlugin: {
    autoplay: true,
    items: [
      {
        sources: [
          {
            src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            type: 'video/mp4'
          }
        ],
        poster: 'https://image.mux.com/5g1hMA6dKAe8DCgBB901DYB200U65ev2y00/thumbnail.jpg?time=43',
        title: 'The title of the episode in the playlist, long title is placed here, the title of',
        duration: '12m'
      },
      {
        sources: [
          {
            src: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/lSKPxmHWQxIQRIQIrdxgQ-20-Encoded-99449564-360p-5425v.mp4',
            type: 'video/mp4'
          }
        ],
        poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/Poster-UWe2eUYN2jkyPBkHHgGwaw-20-189030739-1.jpg',
        title: 'The Enigmatic Yonaguni Monument / The Enigmatic Yonaguni Monument / The Enigmatic Yonaguni Monument / The Enigmatic Yonaguni Monument',
        duration: '4m 52s'
      },
      {
        sources: [
          {
            src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/1998418-2AVJS3l77X8WF84.smil/playlist.m3u8'
          }
        ],
        poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/Poster-58hLnfYY6FHbtEOXxK9RNw-20-948017507-1.jpg',
        title: 'Wave Watchers - The Art of Wave Photography',
        duration: '3m'
      },
      {
        sources: [
          {
            src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/1981200-B2MGj2571UIT48Q.smil/manifest.mpd'
          }
        ],
        poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/Poster-k8XJwHE1i3S8HsGcueFu9Q-20-472728544-1.jpg',
        title: 'Contestant pairs must demonstrate skill as they endure seemingly simple tasks while confined in The Cube, an intimidating glass box with its own mind and attitude, in the hope of winning a major cash prize.',
        duration: '31 second'
      },
      {
        sources: [
          {
            src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/2146802-0K7HJO02HU6uV3r.smil/playlist.m3u8'
          }
        ],
        poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/2100000/Poster-moaVC3LoNV54kER1i7O9bg-20-84995324-1.jpg',
        title: 'FAUL-2703 - FAUL-2703'
      },
      {
        sources: [
          {
            src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/2149575-cQL461C562HM8K3.smil/playlist.m3u8'
          }
        ],
        poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/2100000/Poster-y6kDXw6K5U8qgTwt5oRHA-20-551803395-1.jpg',
        title: 'LONG MOVIE'
      },
      {
        sources: [
          {
            src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
            type: 'video/mp4'
          }
        ],
        poster: 'https://staging.faulio.com/storage/mediagallery/a6/22/big_680484a161e010ca50a229666448700f29463294.jpg',
        title: 'I know nothing about it',
        duration: '1333h'
      }
    ],
    title: 'Play next'
  }
});

Options#

Playlist Options Interface:#

Option	Type	Description
`autoplay`	`boolean`	Whether the playlist should autoplay the next item. Defaults to `false`.
`autoplayDelay`	`number`	Delay in seconds before autoplaying the next item. Defaults to `2` if `autoplay` is `true`.
`title`	`string`	Title of the playlist, displayed if specified.
`items`	`PlaylistItem[]`	Array of playlist items.

PlaylistItem Options Interface:#

Option	Type	Description
`duration`	`string`	Duration of the video (e.g., `00:03:45`)
`title`	`string`	Title of the video in the playlist item.
`options`	`KwikPlayer.Options`	Options to be applied to the player for a specific playlist item.

Passing options for components other than the share-button may cause issues in the player.

Limitations#

The following parameters must be applied initially to the player: tag, podcastPlugin, playlistPlugin, imaDaiPlugin, hotspotsEditorPlugin, chromecastPlugin, airplayPlugin, adblockPlugin.

Passing these options in the PlaylistItem options may lead to instability in the player.

Events#

Event Name	Description
`playlist:change`	Triggered after the playlist items are updated.
`playlist:item`	Triggered after the playlist items are updated.
`playlist:add`	Triggered when new items are added to the playlist.
`playlist:remove`	Triggered when items are removed from the playlist.
`playlist:sorted`	Triggered after sorting, reversing, or shuffling the items.
`playlist:repeat`	Triggered on activating / disabling the playlist repeat state.