Player

There are 2 approaches depending on whether the data integration is handled on the server or client side.

Play can also be integrated as an npm package. Currently we only support React and Next.js. Contact us at [email protected] for more information.

Server Solution (JSON)

1. Insert a link to our JS script

<script src="https://volcano.webout.me/global/player/webout-player.js"></script>

2. Place the player somewhere in `<body>` in the code

<body>
...
<webout-player
    projectSlug="hero"
    signatureUuid="XYZ"
    initialize="true"
    json="{
        "args": {
             "GENDER": "male",
             "LANGUAGE": "en"
        },
        "vars": {
            "IMAGE_PHOTO": "https://cdn.webout.io/assets/images/man.jpg",
            "IMAGE_LOGO": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/625px-Apple_logo_black.svg.png",
            "TEXT_FULL_NAME": "James Bond"
        }
    }"
>
</webout-player>
...
</body>

3. Result

Client Solution (JS)

1. Insert link to our JS script

<script src="https://volcano.webout.me/global/player/webout-player.js"></script>

2. Place the player somewhere in `<body>` in the code

<body>
...
    <webout-player></webout-player>
...
</body>

3. Within the JS script it is possible to fill the player

<script>
    const weboutPlayer = document.querySelector('webout-player');
    weboutPlayer.projectSlug = "hero";
    weboutPlayer.signatureUuid = "XYZ";
    weboutPlayer.args = {
         GENDER: "male",
         LANGUAGE: "en",
    };
    weboutPlayer.vars = {
        IMAGE_PHOTO: "https://cdn.webout.io/assets/images/man.jpg",
        IMAGE_LOGO: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/625px-Apple_logo_black.svg.png",
        TEXT_FULL_NAME: "James Bond",
    };
    weboutPlayer.init();
</script>

4. Result

Download video (JS)

1. Within the JS script create and fill the player, within videoGenerating event listen to the progress and within playerReady event process generated video and download

<script>
    function generateMp4 () {
        const weboutPlayer = document.createElement('webout-player');
        weboutPlayer.style.display = 'none';
        weboutPlayer.projectSlug = "hero";
        weboutPlayer.args = {
             GENDER: "male",
             LANGUAGE: "en"
        };
        weboutPlayer.vars = {
            IMAGE_PHOTO: "https://cdn.webout.io/assets/images/man.jpg",
            IMAGE_LOGO: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/625px-Apple_logo_black.svg.png",
            TEXT_FULL_NAME: "James Bond",
        };

        async function shareFile( file, name ) {
            const shareable = new File( [ file ], name, { type: "video/mp4" } );
            const shareableArray = [ shareable ];
            const payload = { files: shareableArray };
            const canShare = navigator && navigator.canShare?.( payload );

            if( canShare ) {
              await navigator.share( payload );
            }
        }

        weboutPlayer.addEventListener( 'playerReady', async() => {
            const result = await weboutPlayer.generateVideo();
            const video = document.createElement( 'video' );
            video.onloadeddata = () => {
            video.style.maxHeight =  '200px';
            };
            video.src = URL.createObjectURL( result );
            video.controls = true;
            video.playsInline = true;
            video.preload = 'auto';
            video.crossOrigin = 'anonymous';
            video.load();

            const linkDownload = document.getElementById( 'download' );
            linkDownload.href = video.src;
            linkDownload.download = "video.mp4";
            linkDownload.style.display = 'block';
            linkDownload.prepend( video );

            const linkShare = document.getElementById( 'share' );
            linkShare.style.display = 'block';
            linkShare.addEventListener( 'click', () => shareFile( result, 'video.mp4' ) );
        } );

        weboutPlayer.addEventListener( 'videoGenerating', async( event ) => {
            generateBtn.style.display = "none";

            const progress = document.getElementById( 'progress' );
            progress.style.display= 'block';
            if(progress) {
                progress.innerText = 'Generating video ' + event.detail.progress + ' %';
            }
        } );

        document.body.appendChild( weboutPlayer );
    }

    const generateBtn = document.getElementById( 'generate' );
    generateBtn.addEventListener( 'click', () => generateMp4() );
</script>

2. Example

Solution for the React Library

1. Install the package in your project using a package manager

    pnpm add @webout-spark/react-engine@version

2. Import the component into your project

   import { WeboutPlayer } from '@webout-spark/react-engine'

3. Insert the Webout player into your component

function ExamplePage() {

    const args = {
        GENDER: "male",
        LANGUAGE: "en",
    };

    const vars = {
        IMAGE_PHOTO: "https://cdn.webout.io/assets/images/man.jpg",
        IMAGE_LOGO: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/625px-Apple_logo_black.svg.png",
        TEXT_FULL_NAME: "James Bond",
    };

    return (
        <WeboutPlayer
            slug="hero"
            args={args}
            vars={vars}
            onAction={(event) => console.log(event.detail.action)}
            initOnReady
        />
    );
}

WeboutPlayer - Attributes

Name
slug
Type
string
Description
Project slug
Name
args
Type
object
Description
Object of arguments for the specific project
Name
vars
Type
object
Description
Object of variables for the specific project
Name
initOnReady
Type
boolean
Description
Initializes the player immediately after loading

WeboutPlayer - Events

Name
onAction?
Type
function
Description
The function is called after user interaction with the player (e.g., clicking a button in the video)

More examples of integration

1. Insert a link to our JS script

<script src="https://volcano.webout.me/global/player/webout-player.js"></script>

2. Within the JS script it is possible to create and fill the player

    <script>
        const weboutPlayer = document.createElement('webout-player');
        weboutPlayer.projectSlug = "hero";
        weboutPlayer.signatureUuid = "XYZ";
        weboutPlayer.args = {
            GENDER: "male",
            LANGUAGE: "en",
        };
        weboutPlayer.vars = {
            IMAGE_PHOTO: "https://cdn.webout.io/assets/images/man.jpg",
            IMAGE_LOGO: "https://cdn.webout.io/assets/images/man.jpg",
            TEXT_FULL_NAME: "James Bond",
        };
        weboutPlayer.addEventListener('playerReady', () => {
            weboutPlayer.init();
        });
        document.body.appendChild(weboutPlayer);
    </script>

API

HTML custom element - `<webout-player></webout-player>`

Inputs

Name
projectSlug
Type
string
Description
Project slug
Name
projectId
Type
number
Description
Project ID
Name
initialize
Type
boolean
Description
Initialize automatically - suitable for server redirection in combination with the json attribute
Name
autoPlay
Type
boolean
Description
Play automatically
Name
loop
Type
boolean
Description
Play on loop
Name
signatureUuid
Type
string
Description
Signature UUID
Name
args
Type
object
Description
Object with arguments
Name
vars
Type
object
Description
Object with variables
Name
json
Type
json
Description
JSON object with configuration of arguments and variables

Events

Name
playerReady
Type
{}
Description
It is called when the player is rendered to DOM
Name
initialized
Type
{}
Description
Called when the player initializes
Name
chapterUpdated
Type
{ chapter: Object }
Description
Called the moment the chapter changes
Name
sceneUpdated
Type
{ scene: Object }
Description
Called the moment the scene changes
Name
resolutionUpdated
Type
{resolution: { width: number, height: number }
Description
Called when the resolution changes
Name
thumbnailGenerated
Type
{thumbnail: string (base64)}
Description
Called when the preview image is generated
Name
playbackStateUpdated
Type
{ playbackState: 'IDLE' | 'READY' | 'BUFFERING' | 'PLAYING' | 'PAUSED' | 'STOPPED'}
Description
Called when the player changes its state
Name
argsChanged
Type
{ args: Object }
Description
Called the moment the arguments change
Name
videoGenerating
Type
{ progress: number }
Description
Called when the video generation state changes
Name
action
Type
{ action: Object }
Description
Called after user interaction with the player (e.g., clicking a button in the video)

Methods

Name
init()
Type
void
Description
Initialises the player
Name
generateVideo(chapterSlugs: string[])
Type
Promise<file>
Description
Generates video
Name
pause()
Type
Promise<void>
Description
Pauses video
Name
unpause()
Type
Promise<void>
Description
Resumes video
Name
setArgs()
Type
void
Description
Sets the arguments
Name
getArgs()
Type
void
Description
Returns the arguments
Name
setVars()
Type
void
Description
Sets variables
Name
getVars()
Type
void
Description
Returns the variables
Name
reset()
Type
void
Description
Resets the player data to the state after initialization

HTML custom element - `<webout-image-next></webout-image-next>`

Inputs

Name
projectId
Type
number
Description
Project ID
Name
projectSlug
Type
string
Description
Project slug
Name
imageSlug
Type
string
Description
Slug image from project
Name
initialize
Type
boolean
Description
Initialize automatically - suitable for server-side rendering in combination with the json attribute
Name
signatureUuid
Type
string
Description
Signature UUID
Name
args
Type
object
Description
Object with arguments
Name
vars
Type
object
Description
Object with variables
Name
json
Type
json
Description
JSON object with configuration of arguments and variables

Player

Server Solution (JSON)

1. Insert a link to our JS script

2. Place the player somewhere in <body> in the code

3. Result

Client Solution (JS)

1. Insert link to our JS script

2. Place the player somewhere in <body> in the code

3. Within the JS script it is possible to fill the player

4. Result

Download video (JS)

1. Within the JS script create and fill the player, within videoGenerating event listen to the progress and within playerReady event process generated video and download

2. Example

Solution for the React Library

1. Install the package in your project using a package manager

2. Import the component into your project

3. Insert the Webout player into your component

WeboutPlayer - Attributes

WeboutPlayer - Events

More examples of integration

1. Insert a link to our JS script

2. Within the JS script it is possible to create and fill the player

API

HTML custom element - <webout-player></webout-player>

Inputs

Events

Methods

HTML custom element - <webout-image-next></webout-image-next>

Inputs

2. Place the player somewhere in `<body>` in the code

2. Place the player somewhere in `<body>` in the code

HTML custom element - `<webout-player></webout-player>`

HTML custom element - `<webout-image-next></webout-image-next>`