Playlists

Usually, playlists are created by customers using our API or the UI. Alternatively, playlists can also be generated directly via the player configuration when initializing a player instance.

You can create a playlist by adding a playlist object to the player configuration. This works both when embedding the player inline and when creating or updating the player dynamically.

If player token protection is enabled, you must provide a key and timestamp for each item in the playlist. When using videos from different projects, the corresponding private key of each project must be used to generate the correct key for that video.

If token protection is not enabled, the key and timestamp parameters can be omitted entirely.

Playlist options

The following additional options are available when configuring a playlist

Value	Description	Default
showPlaylist	deprecated	false
disablePlaylist	disable playlist in general	false
playlistShowList	show playlist on initial load	false
playlistLabel	the label for the playlist	''
playlistVisibleItems	amount of items shown in playlist	10
playlistMaxItems	maximum amount of items in playlist	500
playlistShowLatest	audio player only	false
playlistSticky	audio player only	false
playlistContainer	Specify an external container for the playlist to display it outside the player. This parameter can be either an HTML element as object or the element's ID as a string.	''
autoShuffle	randomizes the order of the playlist	false
playlistMode	The feature allows you to showcase the playlist in a horizontal layout or to build a video carousel. Available options: normal, carousel, carousel-only	normal

Video Carousel

A video carousel displays multiple videos in a rotating format, offering users the ability to browse through various clips seamlessly. This design allows for showcasing diverse content without overcrowding the interface.

<script src="https://player.3qsdn.com/js3q.latest.js"></script>
<div id="my-player"></div>
<div id="carousel"></div>
<script>
const player = new js3q({
    "playoutId": "3ceb2c09-c40c-4ee2-b52d-7fb041e60646",
    "container": "my-player",
    "playlistMode": "carousel",
    "playlistContainer": "carousel"
})
</script>

Demo

Swipeable Video

Swipeable videos enable users to transition between clips with a simple swipe gesture. This interactive approach is intuitive, providing a smooth and engaging experience, particularly on mobile platforms.

Vertical video carousel

<script src="https://player.3qsdn.com/js3q.latest.js"></script>
<div id="my-player"></div>
<div id="carousel"></div>
<script>
const player = new js3q({
    "playoutId": "3ceb2c09-c40c-4ee2-b52d-7fb041e60646",
    "container": "my-player",
    "playlistMode": "carousel-only",
    "playlistContainer": "carousel"
})
</script>

Demo

Vertical video reel player

<script src="https://player.3qsdn.com/js3q.latest.js"></script>
<div id="my-player"></div>
<script>
const player = new js3q({
    "playoutId": "3ceb2c09-c40c-4ee2-b52d-7fb041e60646",
    "container": "my-player",
    "reels":true
})
</script>

Demo

Manual playlists

Our platform enables you to create playlists through our backend, allowing for both automatic and manual configurations. Below is an example of how you can manually create your own playlist without using our backend system.

<div id="player"></div>
<script src="//player.3qsdn.com/js3q.latest.js"></script>
<script>
  const player = new js3q({
    playoutId: '5c3b0910-8850-11e7-9273-002590c750be', // First video
    container: 'player1',
    key: { key }, // Key and timestamp are only required if token protection is active
    timestamp: { timestamp },
    playlist: {
      0: {
        playoutId: 'f98baa26-38ce-11e8-bcfd-0cc47a188158', // Data ID and title are required
        title: '3Q Logo Animation.mov',
        poster:
          'https://sdn-global-prog-cache.3qsdn.com/thumbs/2015/3144/688639/W6YXmD4g2vZf3Gqh.jpg',
        key: 0, // Key and timestamp are only required if token protection is active
        timestamp: 0,
      },
      1: {
        playoutId: 'd52fcc10-7022-11e9-8d5b-0cc47a188158',
        title: '3Q Logo Animation.mov',
        poster:
          'https://sdn-global-prog-cache.3qsdn.com/thumbs/2015/3144/688639/W6YXmD4g2vZf3Gqh.jpg',
        key: 0,
        timestamp: 0,
      },
    }
  })
</script>