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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://player.docs.3q.video/plugins/playlists.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.