creatable-player
v4.0.16
Published
```bash npm install creatable-player ```
Downloads
71
Readme
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 [email protected].
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 [email protected] 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
}
Demo
You can see a demo of the implementations here
Support
For any questions or bugs, please contact [email protected] with details questions, code snippets or screenshots and we'll be happy to help!