Přehrávač

Existují 2 postupy podle toho, zda se integrace dat řeší na straně serveru, nebo klienta.

Přehrávat je možné integrovat i jako npm balíček. Aktuálně podporujeme pouze React a Next.js. Pro více informací nás kontaktujte na [email protected].

Serverové řešení (JSON)

1. Vložte odkaz na náš JS skript

<script src="https://cdn.webout.io/player/webout-player-next.js"></script>

2. Umístětě přehrávač někam do <body> v kódu

<body>
...
<webout-player-next
    projectSlug="prima-zoo/male"
    signatureUuid="XYZ"
    initialize="true"
    json="{
        "args": {
            "FIRST_NAME": "petr"
        },
        "vars": {
            "TEXT_NAME": "Petr Novotný",
            "IMAGE": "https://cdn.webout.io/assets/images/man.jpg"
        }
    }"
>
</webout-player-next>
...
</body>

Klientské řešení (JS)

1. Vložte odkaz na náš JS skript

<script src="https://cdn.webout.io/player/webout-player-next.js"></script>

2. Umístětě přehrávač někam do <body> v kódu

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

3. V rámci JS skriptu je možné přehrávač naplnit

<script>
    const weboutPlayer = document.querySelector('webout-player-next');
    weboutPlayer.projectSlug = "prima-zoo/female";
    weboutPlayer.signatureUuid = "XYZ";
    weboutPlayer.args = {
        FIRST_NAME: "aneta"
    };
    weboutPlayer.vars = {
        TEXT_NAME: "Aneta Novotná",
        IMAGE: "https://cdn.webout.io/assets/images/woman.jpg"
    };
    weboutPlayer.init();
</script>

Řešení pro knihovnu React

1. Pomocí balíčkovacího manageru nainstalujte balíček do projectu

    pnpm add @webout1/react-engine@version

2. Importujte komponentu do projektu

   import { WeboutPlayer } from '@webout1/react-engine'

3. Vložte webout player do své komponenty

function ExamplePage() {

    const args = {
        FIRST_NAME: "aneta"
    };

    const vars = {
        TEXT_NAME: "Aneta Novotná",
        IMAGE: "https://cdn.webout.io/assets/images/woman.jpg"
    };

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

WeboutPlayer - atributy

  • Name
    slug
    Type
    string
    Description

    Slug projektu

  • Name
    args
    Type
    object
    Description

    Objekt argumentů ke konkrétnímu projektu

  • Name
    vars
    Type
    object
    Description

    Objekt variablů ke konkrétnímu projektu

  • Name
    initOnReady
    Type
    boolean
    Description

    Initicializuje přehrávač ihned po načtení

WeboutPlayer - události

  • Name
    onAction?
    Type
    function
    Description

    Funkce je volána, po interakci uživatele s přehrávačem (např. kliknutí na tlačítko ve videu)

Další příklady integrace

1. Vložte odkaz na náš JS skript

<script src="https://cdn.webout.io/player/webout-player-next.js"></script>

2. V rámci JS skriptu je možné přehrávač vytvořit i naplnit

<script>
    const weboutPlayer = document.createElement('webout-player-next');
    weboutPlayer.projectSlug = "prima-zoo/female";
    weboutPlayer.signatureUuid = "XYZ";
    weboutPlayer.args = {
        FIRST_NAME: "aneta"
    };
    weboutPlayer.vars = {
        TEXT_NAME: "Aneta Novotná",
        IMAGE: "https://cdn.webout.io/assets/images/woman.jpg"
    };
    weboutPlayer.addEventListener('playerReady', () => {
        weboutPlayer.init();
    });
    document.body.appendChild(weboutPlayer);
</script>

API

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

Vstupy

  • Name
    projectSlug
    Type
    string
    Description

    Slug projektu

  • Name
    projectId
    Type
    number
    Description

    ID projektu

  • Name
    initialize
    Type
    boolean
    Description

    Inicializovat automaticky - vhodné pro serverové vyrederování v kombinaci s atributem json

  • Name
    autoPlay
    Type
    boolean
    Description

    Přehrát automaticky

  • Name
    loop
    Type
    boolean
    Description

    Přehrát ve smyčce

  • Name
    signatureUuid
    Type
    string
    Description

    UUID podpisu

  • Name
    args
    Type
    object
    Description

    Objekt s argumenty

  • Name
    vars
    Type
    object
    Description

    Objekt s proměnnýma

  • Name
    json
    Type
    json
    Description

    JSON objekt s konfigurací argumentů a proměnných

Události

  • Name
    playerReady
    Type
    {}
    Description

    Volá se ve chvíli, kdy se přehrávač vyrenderuje do DOMu

  • Name
    initialized
    Type
    {}
    Description

    Volá se ve chvíli, kdy se přehrávač inicialuzuje

  • Name
    chapterUpdated
    Type
    { chapter: Object }
    Description

    Volá se ve chvíli, kdy se změní kapitola

  • Name
    sceneUpdated
    Type
    { scene: Object }
    Description

    Volá se ve chvíli, kdy se změní scéna

  • Name
    resolutionUpdated
    Type
    {resolution: { width: number, height: number }
    Description

    Volá se ve chvíli, kdy se změní rozlišení

  • Name
    thumbnailGenerated
    Type
    {thumbnail: string (base64)}
    Description

    Volá se ve chvíli, kdy se vygeneruje náhledový obrázek

  • Name
    playbackStateUpdated
    Type
    { playbackState: 'IDLE' | 'READY' | 'BUFFERING' | 'PLAYING' | 'PAUSED' | 'STOPPED'}
    Description

    Volá se ve chvíli, kdy přehrávač změní svůj stav

  • Name
    argsChanged
    Type
    { args: Object }
    Description

    Volá se ve chvíli, kdy se změní argumenty

  • Name
    videoGenerating
    Type
    { progress: number }
    Description

    Volá se ve chvíli, kdy se změní stav generování videa

Metody

  • Name
    init()
    Type
    void
    Description

    Initicializuje přehrávač

  • Name
    generateVideo(chapterSlugs: string[])
    Type
    Promise<file>
    Description

    Vygeneruje video

  • Name
    pause()
    Type
    Promise<void>
    Description

    Pauzne video

  • Name
    unpause()
    Type
    Promise<void>
    Description

    Odpauzne video

  • Name
    setArgs()
    Type
    void
    Description

    Nastaví argumenty

  • Name
    getArgs()
    Type
    void
    Description

    Vrátí argumenty

  • Name
    setVars()
    Type
    void
    Description

    Nastaví proměnné

  • Name
    getVars()
    Type
    void
    Description

    Vrátí proměnné

  • Name
    reset()
    Type
    void
    Description

    Resetuje data přehrávače do stavu po inicializaci

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

Vstupy

  • Name
    projectId
    Type
    number
    Description

    ID projektu

  • Name
    projectSlug
    Type
    string
    Description

    Slug projektu

  • Name
    imageSlug
    Type
    string
    Description

    Slug obrázku z projektu

  • Name
    initialize
    Type
    boolean
    Description

    Inicializovat automaticky - vhodné pro serverové vyrederování v kombinaci s atributem json

  • Name
    signatureUuid
    Type
    string
    Description

    UUID podpisu

  • Name
    args
    Type
    object
    Description

    Objekt s argumenty

  • Name
    vars
    Type
    object
    Description

    Objekt s proměnnýma

  • Name
    json
    Type
    json
    Description

    JSON objekt s konfigurací argumentů a proměnných