How to dynamically add and remove videos from a playlist using API

The Cincopa Video Player API allows developers to manage video playlists programmatically. By using a few simple functions, you can dynamically add, remove, or switch videos in a playlist without reloading the player.

This guide explains how to use the Player API to control playlist behavior, such as appending new videos, removing existing ones, or jumping to specific videos or chapters. Each example below includes ready-to-use code snippets to help you integrate these actions into your application.

Here you can see a live example of how our API player controls work

How to Add Cincopa Video Player Buttons Through the API

You will also need to add the corresponding PlayerAPI function:

function playerAPI() {  
    var galleryWrapID = 'playerID';
    if (cincopa && cincopa.getGalleryById(galleryWrapID) && cincopa.getGalleryById(galleryWrapID).playerAPI) {  
        return cincopa.getGalleryById(galleryWrapID).playerAPI; 
    } else {
        return false;  
    }  
}

Here you can find some instruction how to add/remove video to playlist. Its already possible to use combination of this APIs. Check it in action in this example codepen.

1. Add Video to Playlist

You can add video to playlist using the following scripts:

Function:

function addVideo(rid) {   
    galleryGlobal.get_asset_meta(rid, function (data) {  
        playerAPI().playlistAppend(data)  
    });  
    return false  
}

2. Remove Video from Playlist

Function:

function removeVideo(index) {  
    playerAPI() && playerAPI().playlistRemove(index);  
}

3. Go to Another Video from the Playlist

You can go to video from playlist using the following scripts:

Function:

function goTo(index) {  
    playerAPI() && playerAPI().goTo(index);  
}

4. Switch to Another Video Chapter from the Playlist

You can add or remove video and go to chapter video from playlist using the following scripts:

Function:

function switchVideo(rid, chapter, time) {
    galleryGlobal.get_asset_meta(rid, function (data) {  
        playerAPI().playlistAppend(data);  
        removeVideo(1);
        playerAPI().goTo(1, function () {  
        if (chapter)  
            playerAPI().goToChapter(chapter);  
        else if (time)
            playerAPI().setCurrentTime(time);  
        });  
    });  
}

Note: goTo API has second param callback that fired when player already loaded requested video.