Плейлисты
В плеере можно показать несколько роликов подряд. Есть два способа задать плейлист — выбрать удобный под задачу.
| Вид | Как задаётся | Когда удобно |
|---|---|---|
| Динамический | ID видео в URL (video_ids) | Список собираете на лету в своём коде |
| Статический | ID плейлиста из панели (/pl/…) | Плейлист уже создан в каталоге |
Динамический плейлист
Перечислите ID видео через запятую в параметре video_ids:
<iframe
src="https://kinescope.io/playlist?video_ids=ID1,ID2,ID3"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
В браузерах есть ограничения на длину URL. Для больших списков используйте статический плейлист.
Статический плейлист
Укажите ID плейлиста из панели управления:
<iframe
src="https://kinescope.io/pl/PLAYLIST_ID"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Создание и настройка плейлиста в каталоге — в статье Плейлисты .
Использование с IFrame API
Те же URL передавайте в параметр url при create()
:
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory
.create('player', {
url: 'https://kinescope.io/playlist?video_ids=ID1,ID2,ID3',
behavior: {
playlist: {
autoSwitch: true,
loop: false,
},
},
})
.then((player) => {
player.on(player.Events.CurrentTrackChanged, (event) => {
console.log('Текущий ролик:', event.data.item.id)
})
player.on(player.Events.Ended, () => {
console.log('Плейлист завершён')
})
})
}
behavior.playlist.autoSwitch — автоматически переключать на следующий ролик (по умолчанию true).behavior.playlist.loop — повторять весь плейлист (по умолчанию false).
Управление плейлистом
| Метод | Описание |
|---|---|
next() | Следующий ролик |
previous() | Предыдущий ролик |
switchTo(id, options?) | Переключить на ролик по ID |
getPlaylistItem() | Текущий ролик ({ id }) |
Подробнее о сигнатурах и событии CurrentTrackChanged — в Управлении плеером
.
Что дальше?
- CTA — призывы к действию на роликах плейлиста
- Создание плеера
—
CreateOptionsиbehavior.playlist - Плейлисты в каталоге — создание статических плейлистов в панели