Creatable-player NPM

Installation

npm install creatable-player

Usage

The Creatable player is used to play video content from the Creatable platform. By default the player will occupy the containing element that it is placed in. Depending on the shape of the video that is being requested to be played, you can either hardcode the shape of the player in your implementation, or use data from our API to identify the exact shape the player container needs to be using the height/width data values and dynamically adjust the shape of the player.

In all cases when implementing the Creatable player, you must provide a clientId in the implementation. Failing to do so will cause the player to not function properly. If you don't have your clientId, you can email support@creatable.io.

The below example is a basic implementation that passes a Creatable video data object to the player and forces a 16:9 aspect ratio.

CreatablePlayer

This is a functional component that allows user to initialize a player, also provides access to the player instance:

import {CreatablePlayer} from "creatable-player";
import video from "video.json";

const PlayerImplementation = () =>{
    // If you need the to access the player instance, you can get it by passing a callback to the component
    const callbackFunction=(instance)=>{
        // You can use the instance to perform basic operations like play, pause, mute, setVolume
        
        // instance.play();
        // instance.pause();
        // instance.mute();
        // instance.setVolume(50);
    }
    
    return <div style={{position: 'relative', aspectRatio: '16/9'}}>
        <CreatablePlayer playerId='my-creatable-player' data={video} clientId={'0000000'} getPlayerInstance={callbackFunction} />
    </div>
}

useCreatablePlayer hook

This hook provides an instance to create the Creatable player.

NOTE: `creatable.startPlayer();` will return the player instance but also it will return it on the hook as second value.

import {useCreatablePlayer} from "creatable-player";
import video from "video.json";

const PlayerHookImplementation = () =>{
    const [creatable, playerInstance] =  useCreatablePlayer({
        playerId: 'creatable-hook',
        data: video,
        clientId: '0000000'
    });
    useEffect(()=>{
        creatable.startPlayer();
    },[creatable])
    return <div style={{position: 'relative', aspectRatio: '16/9'}}>
        <div id={'creatable-hook'}></div>
    </div>
}

React context

This example uses a provider and a consumer to create an instance of the Creatable player, this will hydrate the component with 2 new properties startPlayer and playerInstance.

Consumer component

import {withCreatablePlayer} from "creatable-player";
import {useEffect} from "react";

const ReactContextImplementation = (props: any) =>{
    useEffect(()=>{
        if(typeof props.startPlayer === 'function'){
            props.startPlayer();
        }
    },[props])
    return <div style={{position:'relative', aspectRatio: '16/9'}}>
        <div id={'creatable-context'}>

        </div>
    </div>
}
export default withCreatablePlayer(ReactContextImplementation);

Provider component

import {CreatablePlayerProvider} from "creatable-player";

const MyApp = (props) =>{
    return <CreatablePlayerProvider value={{playerId: 'creatable-context', clientId: '0000000', data}}>
        <ReactContextImplementation />
    </CreatablePlayerProvider>
}
export default withCreatablePlayer(ReactContextImplementation);

Options

playerId {string} : required | CreatablePlayer, useCreatablePlayer

This should be the id value of the html element where the player will be mounted

clientId {Number} : required

This value is assigned by Creatable. Please contact support@creatable.io if you don't already have this value.

data {object} : required

This property receives a video data object, in json format, provided by the Creatable API.

configuration {object}: optional

This option provides style and behavior customizations for the player.

{
  "autoplay": "boolean", // true or false, default true
  "onPlayerReady": "function", //callback function once the player is ready
  "onPlayerStateChange": "function", //callback function return the state of the player
  "progress_color": "string", // progress bar color, default #fff
  "play_button_border_radius": "string" // css property, default 50%,
  "play_button_border_width": "string", // css property, default 5px
  "play_button_border_color": "string", // css property, default #121212
  "play_button_border_style": "string", // css property, default solid
  "play_button_background_color": "string" // css property, default #121212
}