pixi

Similarly to the canvas plugin, the pixi plugin also replaces the <video> element with a <canvas> element that can be manipulated.
It allows you to create a highly customized video experience powered by Pixi.js.
The plugin introduces the concept of applets, which are small applications that handle the setup (and optionally the destruction) of a pixi container that will be displayed for the duration of a node’s playback.
Apart from attaching applets to nodes using the attach method, you can also use Pixi.js directly to add display objects onto the stage and manage your own logic.

This plugin is not loaded by default, so you’ll have to explicitly load it using the onIntroReady intro.js hook.
This plugin does not auto initialize and should be initialized manually
In order to make your project compatible for download and offline viewing, you should use the external resources JSON instead of hard-coded URLs.

Example 

import loadjs from 'loadjs';
export default {
     onIntroReady: function(player) {
         // load pixi plugin
         loadjs('//eko.com/resources/js/plugins/pixi/pixi.min.gz.js', { returnPromise: true })
             .then(() => {
                 player.initPlugin('pixi');
             });
     }
};

Init Options

options : object

Initialization options for the pixi plugin.

options.fps : number
property

The initial framerate of renderer.render() calls (frames per second).
This value can later be changed via the fps property.

Default: 60
See: fps
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "fps": 40
        }
    }
}

options.defaultApplet : string
property

Which applet should be used for nodes that do not have an applet explicitly attached to them.
You can register your own applets, but there are also a few that come built-in with the plugin:

  • regular - Will render the video and switch channels for parallel nodes (similar to non-pixi default player behavior).
  • fade - Will fade video when switching channels on parallel nodes.
  • wipe - Will wipe the video when switching channels on parallel nodes.
  • blank - Will not render anything.
    Value could be changed later via the defaultApplet property.

Default: "regular"
See: defaultApplet, register
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "defaultApplet": "fade"
        }
    }
}

options.width : number
property

The width of the pixi renderer.

Default: 1280
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "width": 1280,
            "height": 720
        }
    }
}

options.height : number
property

The height of the pixi renderer.

Default: 720
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "width": 1280,
            "height": 720
        }
    }
}

options.videoWidth : number
property

The total width of the video content (will be used as a default value for the 5th argument to createVideoSprite).

Default: 1280
See: createVideoSprite, videoWidth
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "videoWidth": 1280,
            "videoHeight": 720
        }
    }
}

options.videoHeight : number
property

The total height of the video content (will be used as a default value for the 6th argument to createVideoSprite).

Default: 720
See: createVideoSprite, videoHeight
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "videoWidth": 1280,
            "videoHeight": 720
        }
    }
}

options.backgroundColor : number
property

The renderer’s background color.

Default: 0x000000
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "backgroundColor": "0xFFFFFF"
        }
    }
}

options.forceCanvasRenderer : boolean
property

If true, will force pixi to use the canvas renderer (instead of auto-detecting the best renderer available).
Default value is dynamic - on some platforms rendering video with WebGL is problematic so this value will be set to true.

Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "forceCanvasRenderer": true
        }
    }
}

options.optimizationEnabled : boolean
property

Using the pixi plugin incurs a performance hit, since native video playback is replaced with a canvas element.
Drawing frames onto the canvas can only be done during javascript event loop ticks which ties the video playback to the browser’s framerate.
If the browser’s framerate drops, video playback could become visibly choppy.
When optimizationEnabled is set to true, the pixi plugin will alternate between the native video element and the pixi canvas.
It’ll try to detect situations where the pixi canvas would have displayed nothing but the native video frames and remove the canvas from the DOM during these times.
When it detects the pixi canvas is needed, it’ll automatically add it back to the DOM and hide the native video.

Default: true
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "optimizationEnabled": false
        }
    }
}

options.imageSmoothingEnabled : boolean
property

Should we enable image smoothing?

Default: true
Example 

// playerOptions.json
{
    "plugins": {
        "pixi": {
            "imageSmoothingEnabled": false
        }
    }
}

Properties

player.pixi.PIXI : object
propertyreadonly

A reference to the PIXI library.

Example 

var PIXI = player.pixi.PIXI;
var myContainer = new PIXI.Container();

player.pixi.renderer : object
propertyreadonly

A reference to the PIXI renderer instance.

player.pixi.stage : object
propertyreadonly

A reference to the PIXI stage instance - the root container that’s rendered on each frame.

Example 

player.pixi.stage.addChild(mySprite);

player.pixi.fps : number
property

The framerate of renderer.render() calls (frames per second).

Example 

function makeVideoPlaybackChoppy() {
    player.pixi.fps = 10;
}

function makeVideoPlaybackSmooth() {
    player.pixi.fps = 60;
}

player.pixi.defaultApplet : string
property

The default applet to be used for nodes which do not have an applet attached to them.
This must be a registered applet.
You can write your own, or use one of the built-in applets:

  • regular - Will render the video and switch channels for parallel nodes (similar to non-pixi default player behavior).
  • fade - Will fade video when switching channels on parallel nodes.
  • wipe - Will wipe the video when switching channels on parallel nodes.
  • blank - Will not render anything.

Example 

if (player.pixi.defaultApplet !== 'wipe') {
    player.pixi.defaultApplet = 'wipe';
}

player.pixi.width : string
propertyreadonly

The renderer’s width.

player.pixi.height : string
propertyreadonly

The renderer’s height.

player.pixi.videoWidth : string
propertyreadonly

The total width of the video content (will be used as a default value for the 5th argument to createVideoSprite).

player.pixi.videoHeight : string
propertyreadonly

The total height of the video content (will be used as a default value for the 6th argument to createVideoSprite).

player.pixi.version : string
propertyreadonly

The pixi plugin’s version string.

Example 

console.log('The pixi plugin version is', player.pixi.version);

Methods

player.pixi.register(name, applet)
method

Register a named applet, so that it can later be attached to nodes, or used as the defaultApplet.
An applet is a small application that will handle the setup (and optionally the destruction) of a pixi container that will be displayed for the duration of a node’s playback.

See: register

Param Type Description
name string The name of the applet.
applet object | appletCreateFn An object that contains a create() function, and optionally destroy() and/or canFallbackToNativeVideo() functions. The create() function will be invoked when it’s time to display the node’s container. If a function is given, it’ll be used as the create() callback.

Example 

// Display all channels in a parallel node concurrently (smooshed into columns)
player.pixi.register('columns', function(container, videoSprites, node, options) {
    var channelWidth = player.pixi.width / videoSprites.length;

    videoSprites.forEach(function(sprite, index) {
        // Set position and size
        sprite.position.set(index * channelWidth, 0);
        sprite.width = channelWidth;
        sprite.height = player.pixi.height;

        // Add to container
        container.addChild(sprite);
    });
});

// Attach it to a node
player.pixi.attach('mynodeid', 'columns');

player.pixi.attach(node, applet, [options])
method

Attach an applet to a node (or nodes).
An applet is a small application that will handle the setup (and optionally the destruction) of a pixi container that will be displayed for the duration of a node’s playback.
The lifecycle of containers in applets are managed by the plugin - it’ll decide when to call your applet’s create() function and when to invoke your optional destroy() function.
The container will be displayed within the following pixi hierarchy: stage -> masterNodeContainer -> container.

See: register

Param Type Description
node string | Node | RegExp | function | Array.<*> The node (or nodes) to attach the applet to. This value can either be a string (node id), a node object, a RegExp that will match one or more node ids, a function that receives a node object and returns true if it matches, or an array of any of these.
applet object | appletCreateFn | string An object that contains a create() function, and optionally destroy() and/or canFallbackToNativeVideo() functions. create() function will be invoked when it’s time to display the node’s container. If a function is given, it’ll be used as the create() callback. If a string is given, it’ll use the pre-registered applet with that name.
[options] object An optional options object. This will be the 4th argument of the applet’s create() function.

Example 

player.pixi.attach('myparallelnodeid', (function() {
    var node;
    var container;

    function onNodeCuePoint() {
        container.alpha = 0.5;
    }

    return {

        // Display all channels in a parallel node concurrently (smooshed into rows)
        create: function(container_, videoSprites, node_, options) {
            // Save a reference to the node and the container
            node = node_;
            container = container_;

            // Calculate the height of each video channel
            var channelHeight = player.pixi.height / videoSprites.length;

            // Iterate over video sprites
            videoSprites.forEach(function(sprite, index) {
                // Set position and size
                sprite.position.set(0, index * channelHeight);
                sprite.width = player.pixi.width;
                sprite.height = channelHeight;

                // Add to container
                container.addChild(sprite);
            });

            node.on('timeupdate:3', onNodeCuePoint);
        },

        canFallbackToNativeVideo: function(node) {
            return false;
        },

        destroy: function() {
            node.off('timeupdate:3', onNodeCuePoint);
        }
    }
}()));

player.pixi.createVideoSprite(x, y, width, height, [videoWidth], [videoHeight]) ⇒ PIXISprite
method

Create a rectangular sprite out of the video content.
Make sure to call destroy() on the returned sprite once you’re done with it.

Returns: PIXISprite - A rectangular video sprite.

Param Type Description
x number The x value, relative to videoWidth.
y number The y value, relative to videoHeight.
width number The width, relative to videoWidth.
height number The height, relative to videoHeight.
[videoWidth] number Optional. The x and width values will be calculated relative to this value. This value represents the total width of the video. If not given, will use the initial videoWidth config value.
[videoHeight] number Optional. The y and height values will be calculated relative to this value. This value represents the total height of the video. If not given, will use the initial videoHeight config value.

Example 

// Swap top half and bottom half of video
var topHalfOfVideoSprite = player.pixi.createVideoSprite(0, 0, 1280, 360, 1280, 720);
var bottomHalfOfVideoSprite = player.pixi.createVideoSprite(0, 360, 1280, 360, 1280, 720);
topHalfOfVideoSprite.position.set(0, 360);
bottomHalfOfVideoSprite.position.set(0, 0);
player.pixi.stage.addChild(topHalfOfVideoSprite);
player.pixi.stage.addChild(bottomHalfOfVideoSprite);

player.pixi.createVideoSpriteFromNodeChannel(node, [channel]) ⇒ PIXISprite
method

Create a sprite out of the video content, specifically grabbing a single channel out of a parallel node.
Make sure to call destroy() on the returned sprite once you’re done with it.

Returns: PIXISprite - A rectangular video sprite corresponding to the requested node’s channel.

Param Type Description
node string | Node The node id or node object.
[channel] number Optional. The zero-based channel index. If not given, will create sprite of first channel (index 0).

Example 

var ch1Sprite = player.pixi.createVideoSpriteFromNodeChannel('mynodeid', 0);
var ch2Sprite = player.pixi.createVideoSpriteFromNodeChannel('mynodeid', 1);

Callbacks

appletCreateFn : function
callback

A callback function that will be invoked when an applet that has been attached to a node is about to be displayed.

See: attach

Param Type Description
container PIXIContainer An empty PIXIContainer object. This is a simple container, created by calling new PIXI.Container(), but its lifecycle is managed by the pixi plugin.
videoSprites Array.<PIXISprite> An array of video sprites (one for each channel of current node).
node Node The current node object.
options object An options object that was optionally given when applet was attached.

Example 

// Display all channels in a parallel node concurrently (smooshed into columns)
function create(container, videoSprites, node, options) {
    var channelWidth = player.pixi.width / videoSprites.length;

    videoSprites.forEach(function(sprite, index) {
        // Set position and size
        sprite.position.set(index * channelWidth, 0);
        sprite.width = channelWidth;
        sprite.height = player.pixi.height;

        // Add to container
        container.addChild(sprite);
    });
}

appletDestroyFn : function
callback

A callback function that will be invoked when an applet is being disposed of (container is no longer displayed).

See: attach, register
Example 

function destroy() {
    player.off('myevent', onMyEvent);
}

appletCanFallbackToNativeVideoFn ⇒ boolean
callback

A callback function that provides a hint to optimizationEnabled mode.
This function accepts a single argument (node object) and should return true if node does not require rendering onto PIXI canvas (and thus we can fallback to displaying the native video element instead).
Omitting this function from an applet is functionally equivalent to providing a function that always returns false.

Returns: boolean - True if pixi canvas is not needed for node, false otherwise.
See: optimizationEnabled, register

Param Type Description
node Node The current node object.

Example 

function canFallbackToNativeVideo(node) {
    // For this example, we assume we attached some metadata
    // to nodes that do not require PIXI canvas.
    return !!node.data.studio.isSimpleVideoNode;
}
Rate this page:
☆ ☆ ☆ ☆ ☆
X
Tell us more!