# 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 <a href="#page_playlist_options" id="page_playlist_options"></a>

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.

```js
<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](https://player.3qsdn.com/?config=%7B%22dataid%22%3A%223ceb2c09-c40c-4ee2-b52d-7fb041e60646%22%2C%22playlistMode%22%3A%22carousel%22%2C%22playlistContainer%22%3A%22player-carousel%22%2C%22autoplay%22%3Afalse%7D)

### **Swipeable Video**&#x20;

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

```html
<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](https://player.3qsdn.com/?config=%7B%22dataid%22%3A%224d1f8724-fcb7-45fa-a278-9b4e05c7997a%22%2C%22playlistMode%22%3A%22carousel-only%22%2C%22playlistContainer%22%3A%22player-carousel%22%2C%22autoplay%22%3Afalse%2C%22aspect%22%3A1.77778%7D)

#### Vertical video reel player

```html
<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](https://player.3qsdn.com/?config=%7B%22dataid%22%3A%224d1f8724-fcb7-45fa-a278-9b4e05c7997a%22%2C%22reels%22%3Atrue%2C%22autoplay%22%3Afalse%7D)

### 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.

```html
<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>
```