DOCSEARCHbyAlgolia
Submit Docs

Eko SDK Documentation

website·Indexed 35 days ago

http://developer.eko.com/docs/

Developer resources for creating and embedding interactive video experiences. Includes documentation for the JavaScript SDK, iOS and Android native SDKs, the InterludePlayer class, and the ekoshell plugin. Covers API endpoints for project personalization, custom UI development, subtitle management, and integration via iframes using a postMessage-based API.

Tokens
88.8K
Snippets
529
Records
698
Agent score
62%

What's inside Eko

  1. Overview of Eko SDK capabilities

    The Eko SDK provides a framework for creating interactive video experiences with the following core features:

    • Dynamic Streaming: Seamlessly change video/audio streams based on user interaction, user agent, or external API data.
    • Intelligent Asset Loading: Optimized bandwidth usage via internal algorithms and heuristics.
    • Cross-Platform Support: Consistent playback across modern desktop, laptop, tablet, and mobile devices.
    • UI Integration: Support for building overlays using HTML, JS, and CSS, with automatic scaling and positioning based on device aspect ratio.
    • Adaptive Bitrate: Real-time bitrate adjustment to handle fluctuations in connection speed.
    • Managed Infrastructure: Integrated encoding, hosting, and delivery services.

  2. Overview of the Eko Player Repository

    The repository stores all nodes known to the player. Nodes are registered with a unique string ID and can be retrieved by that ID. Once a node is added to the repository, it can be referenced by its ID when pushing content to the player's playlist.
    player.repository.add({
    id: 'node_myNodeId',
    source: 'https://eko.com/my.ivd'
});

player.playlist.push('node_myNodeId');

  3. Overview of Interactive Video Handlers

    Handlers are configurations used to trigger common actions within an interactive video, such as jumping to a new video node, playing sounds, opening URLs, or sharing to social media. Each UI element can be assigned a list of handlers; when the element is clicked, the associated actions are executed sequentially.

  4. Overview of the Checkpoints plugin

    The checkpoints plugin enables saving and restoring the player state, which includes the playlist, currentTime, and whether the player is playing or paused. It allows for custom logic via module registration for saving and restoring specific states.

    Critical Caveat: Functions cannot be saved or restored. Any API that takes callback functions (e.g., decision.add() with a decider option, variables.registerAction(), or variables.connect()) will not be restored. To ensure correct behavior, call these APIs within the onReady hook or via a custom registered module during restoration.

    // Save a checkpoint before a specific event
function onBeforeBloodyBattle() {
    player.checkpoints.save();
}

// Restore the most recent checkpoint
function onGameOver() {
    let checkpointsArr = player.checkpoints.checkpoints;
    let lastCheckpoint = checkpointsArr[checkpointsArr.length - 1];
    if (lastCheckpoint) {
        player.checkpoints.restore(lastCheckpoint);
    }
}

  5. Overview of the Eko player end plugin

    The end plugin is used to configure the end point of a project, defining the specific time or node where the end experience begins.

  6. Overview of the Node object

    The Node object represents a chunk of video and is the primary currency of the InterludePlayer. It is used in conjunction with the playlist and repository. To create a new node instance, use repository.add(). To retrieve an existing node instance, use repository.get().

  7. Overview of ControlsOverlay addon

    The ControlsOverlay addon exposes the UI for controlling the playback of an interactive video. It includes features like an autoHide mechanism that hides controls after 3 seconds of inactivity (configurable via plugin options). When the controls are visible, the subtitles display zone bottom1 is locked.

  8. Overview of the overlays plugin

    The overlays plugin allows developers to overlay DOM elements on top of the video player. It automatically handles scaling and boxing to ensure the UI fits correctly across different devices (mobile vs. desktop) and player states (such as fullscreen). The plugin provides a set of methods to add, remove, show, and hide these overlays.
    // Add a DIV element (assume myDecisionDiv is a predefined var referencing a DOM element)
player.overlays.add('decisionOverlay', myDecisionDiv, {visible: false});

// Show the element whenever a 'decision.start' event is triggered
player.on('decision.start', function() {
    player.overlays.show('decisionOverlay');
});

// Hide the element whenever a 'decision.end' event is triggered
player.on('decision.end', function() {
    player.overlays.hide('decisionOverlay');
});

  10. Overview of the audio plugin

    The audio plugin enables overlaying external audio streams on top of video playback. It handles the synchronization of external audio (such as pausing sound when the video pauses or buffers) via the soundtrack feature or the linkToVideoPlayback/unlinkFromVideoPlayback APIs. It is powered by the open-source webaudio library sonorousjs.

  11. Overview of the sparks plugin

    The sparks plugin fetches content from the Sparks Service and dynamically injects it into a stream at predefined locations. It allows developers to tag the viewer's state in real-time, which the plugin uses to determine the most relevant Spark to inject.

  12. Overview of the player.sendables plugin

    The player.sendables plugin dynamically generates HTML from templates defined within a project and populates them with provided data. This HTML can then be exported as a PDF, sent via email, or provided as a link. To use this plugin, HTML templates and JSON schemas must be located in a sendables/ folder within the project.