Third Party Player Integrations

We recognize that deciding on and investing in a player solution that meets the needs of your enterprise is a big decision. Simply embedding any player may not be a possibility when much thought and work has gone into building on top of and maintaining a 3rd party player solution across your web and native properties. This is especially true with advanced analytics and ad serving like VAST and IMA. This is why the Cinematique's Javascript SDK aims to support popular players through a simple set of adapters and plugins. This way, you can continue to use your current player solution and let our adapters take care of integrating touchable technology into your video offering.

Supported Players

Cinematique's touchable technology is HTML5 based only. With flash becoming more and more obsolete and HTML5 video players becoming the norm, touchable video technology is easier than ever to integrate into your own HTML5 player. Currently, we support the popular VideoJS and JWPlayer. Future releases aim to support Ooyala and more. Our aim is to create thin wrappers around each player and never dig too deep to adapt third party technologies to our own. We also recognize that you could be maintaining advanced customizations to your player of choice and we do not want to interfere with those changes.

Player adapters for supported 3rd party players can be found under the cin.ui.adapters namespace. See the examples below for a closer look.

Syncing Media

Cinematique aims to make usage of your existing asset ID as easy as possible. That way you do not need to store the Cinematique videoID on your end. We provide a way to match the video asset ID against our own API to find the data for your existing content.

VideoJS

The Javascript SDK supports the VideoJS v4 and VideoJS v5 out of the box with the default HTML5 provider.

Adapter Setup



    // VideoJS asset ID
    let assetId = 'FVc8mVL4';

    const config = {
        assetId: assetId
    };

    // Initialize your Videojs player instance as you may normally do
    let vjs = videojs('#player');

    // With an initialized SDK, create an instance of the VideoJS adapter
    let adapter = cin.ui.adapters.VideoJSAdapter();

    // Now you can adapt your player, providing the instance and the mediaId for
    // the asset so we can fetch the relative content from the cinematique API
    adapter.adapt(vjs, config).then(() => {
        console.log('Adapter setup!');
    });

Use Our Custom Skin

If you would like to leverage Cinematique's custom skin with your own player, this class must be added to your VideoJS element. Our skin will be loaded globally and will override your existing styles.



    <video id="player" class="vjs-skin-cin-sdk" />

JWPlayer

JWPlayer is a mature player offering, providing a concise Javascript API and a robust platform that suits both simple and advanced needs. The Javascript SDK supports the JWPlayer v7 out of the box with the default HTML5 provider.

Adapter Setup



    // JWPlayer asset ID
    let assetId = 'FVc8mVL4';

    const config = {
        assetId: assetId
    };

    // Initialize your JWPlayer player instance as you may normally do
    let jwp = jwplayer('#player').setup({
        autostart: false,
        controls: true,
        aspectratio: '16:9',
        stretching: 'uniform',
        primary: 'html5',
        hlshtml: false,
        playlist: [ ... ]
    });

    // With an initialized SDK, create an instance of the JWPlayer adapter
    let adapter = cin.ui.adapters.JWPlayerAdapter();

    // Now you can adapt your player, providing the instance and the mediaId for 
    // the asset so we can fetch the relative content from the cinematique API
    adapter.adapt(jwp, config).then(() => {
        console.log('Adapter setup!');
    });

Use Our Custom Skin

If you would like to leverage Cinematique's custom skin with your own player, this setting must be added to your JWPlayer configuration options when creating your player instance. Our skin will be loaded globally and will override your existing styles.



    // Initialize your JWPlayer player instance as you may normally do,
    // but add the additional skin option or replace your existing value
    let jwp = jwplayer('#player').setup({

        // ... other config options

        skin: {
            name: 'cin-sdk'
        }        
    });

Next Steps

SDK Widgets