You can easily create a playlist with our player by adding a playlist object to the player configuration. This can be done both when embedding the player inline as well as dynamically.
Please note that if player token protection is active, you will have to add key
and timestamp
to each item in the playlist. If you are using videos from different projects, you will need to use the private key of each video’s respective project to generate its key. If token protection is not active, you can omit the key
and timestamp
parameters entirely.
Example playlist
<script type="text/javascript" src="//player.3qsdn.com/js3q.latest.js"></script>
<div id="player1"></div>
<script type="text/javascript">
var js3qVideoPlayer = new js3q({
dataid: '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: {
dataid: '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: {
dataid: '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>
Configuration 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 |
playlistContainer | (playlist 2.0 only) - for external container, like comments | '' |
Player Methods
Name | Parameters | Description |
---|---|---|
getPlaylistItems | Returns an array of all available items in the playlist | |
playlistItem | index: number | Sets the active medium to the given index |
next | Plays the next item in the playlist | |
previous | Plays the previous item in the playlist |