Dynamic Streaming

At the heart of eko’s interactive technology is the robust dynamic video stream of the Interlude Player.

Video Node

The video node is the smallest linear video unit in any given interactive video. Each node comes in IVD format, which stands for Interlude Video Descriptor. Each IVD references to all the encoded video files required by the player on different platforms and devices.

Playlist

The playlist is the path of video nodes stream actually being played. The video nodes are pushed into the playlist in real time according to the triggered selection and overall interactive behavior. The playlist is translated to the platform’s native video playback structure and played as a continuous linear stream.

Prefetching Rules

To provide a seamless experience, it’s highly recommended that the video nodes will be ready to be played as soon as they are pushed to the playlist. Prefetching the video nodes in advance allows for smooth interactive transitions no matter which choice was selected.

In case you know in advance which nodes can be selected, these nodes should be defined as prefetched nodes.

You can add prefetching to a node when it is being created:

player.repository.add({
    id: 'Node1',
    source: ivds.video1,
    prefetch: ['Node2', 'Node3']    // Node1 will prefetch Node2 and Node3
});

Or, after the node is in the repository you can add or remove prefetching as follows:

// Node1 and Node2 are already in the repository

// addPrefetch is used so Node1 will prefetch Node2
player.repository.get('Node1').addPrefetch('Node2');
// removePrefetch is used so Node1 will no longer prefetch Node2
player.repository.get('Node1').removePrefetch('Node2');

We suggest setting rules to optimize the order in which the video node data is downloaded to the device.

eko Studio takes care of setting prefetch rules for you based on the project’s tree structure. In most cases this will be enough. Add or remove rules via API only if you creative requirements go beyond what eko studio prtovides.

Critical Time

To provide a seamless experience, it’s important for the next video in the playlist to be pushed into the stream. To achieve that the the next node in the stream needs to be added at least 0.5-1.5 seconds (depending on the platform) to the stream playlist. These 0.5-1.5 seconds are called Critical Time and any appended node at this time won’t be played.

Stream Modifiers

The Interlude player can support several stream modifiers, created to serve the variety of interactive storytelling methods. Each stream modifier answers a different narrative demand, while keeping the playlist stream performance.

The types of stream modifiers used by Interlude are: Seamless (append), Immediate (seek), and Parallel (switch).

Seamless

Lets you play consecutive video nodes while keeping the transitions between them frictionless, giving the viewer the impression the path they’re watching is made of a linear video stream.

The player.append function is used to create the seamless transition between nodes. It will always add the node to the end of the stream playlist.

// append adds Node1 to the end of the playlist
player.append('Node1');

Immediate

For transitions where the current video node and the consecutive one happens immediately after the selection was triggered.

The player.seek function is used to when creating an immidiate jump to a new node. It too will always add the node to the end of the stream playlist, which might cause the playlist to skip over appended nodes which have not played yet.

// seek tells the player to start playing Node7 immediatly
player.seek('Node7');

On some platforms (primarily iPad browsers), there might be a slight delay between the selection being triggered and the transition to the consecutive video node. We recommend adding a UI indication to make it clear to the viewer that the selection was registered, but the transition has not occurred yet.

Parallel

Used when playing several video streams with the ability to switch between them at any given point.

We recommend to only use this option when there’s a small number of channels (up to four) to achieve high video quality and performance across devices. In case your interactive narrative demands the ability to use a larger amount of channels – please consult with us on the best way to achieve this.

Use player.switch function to switch between parallel channels in the same node.

// change to channel 4 of the parallel node
player.switch(4);
// change to the next channel
player.switch('next');
// change to the previous channel
player.switch('prev');

Player Events

The player can respond when a modifier is used to change the stream. For example, let’s say the user is watching a video that has two channels (parallel) and you’ve already given them the ability to switch between channels. Now we want to pop up an alert to the user as soon as the stream is changed to channel 2. To do that, all we need to do is listen to the switched event:

player.on('switched', event => {
     if (event.currentChannelIndex === 2) {   // currentChannelIndex is an argument of the 'switched' event that gives the index of the channel we just switched to
         console.log('Welcome to channel 2!');
     }
});

All stream modifiers have their complementing events to help you respond to them in your project. They are all documented in the player API but here’s a quick list:

Misc:

Immediate:

  • ‘seeking’ – fired when the player is in the process of loading the node you’re jumping to.
  • ‘seeked’ – fired when the player finished seeking (the new node is now playing).

Parallel:

  • ‘switching’ – fired when the player is in the process of switching channels.
  • ‘switched’ – fired when the player finished switching switching (the new channel is now playing).

To respond to seamless changes you can use events such as nodestart and timeupdate similar to how we did it in the getting started. See the player API for a full list of available events and arguments that come with them.

Building & RunningLoading Flow

Rate this page: X
Tell us more!