Documentatie | Wave.video knop

Knop Wave.video

1. Maak je knop en voeg deze toe aan je pagina

Stel je knop in en plaats de knopcode waar deze op je pagina moet verschijnen.
Zorg ervoor dat je YOUR_API_KEY vervangt door je werkelijke API-sleutel.

```
<script>
```
```
(functie (d,w,e,c,a) {
```

    var cf = w[c] = w[c] || {}; cf.apiKey = a;

    var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];

```
    sc.async=!0;
```

    sc.src=cf.embed || 'https://wave.video/editor/embed.js';

```
    s.parentNode.insertBefore(sc, s);
```

})(document, window, 'script', 'waveconfig', '');

```
</script>
```

<span class="wave-video-knop groot standaard"

data-video-format="youtube_horizontal">Maak video</span>

Voorbeeld van je knopMaakvideo

2. Hoe het werkt

Als u op de knop klikt, wordt Wave.video-editor gestart in het iframe op uw pagina. Uw gebruikers moeten zich aanmelden bij Wave.video of zich registreren als ze nog geen account hebben. Nadat uw gebruikers een video hebben gemaakt, publiceren ze deze op uw website.

Er zijn verschillende manieren om de video uit de editor te halen. De eenvoudigste is om video tag ID op te geven waar de video wordt geplaatst. Een andere optie is om een callbackfunctie op te geven om de URL en thumbnails van de video te ontvangen.

Bekijk de demo's

3. Pas je knop aan

Je kunt de knop aanpassen met je eigen stijl of je kunt de door ons geleverde stijlen gebruiken. Je kunt meerdere knoppen op de pagina hebben, maar ze moeten allemaal de class wave-video-button hebben.

Elke knop kan verder worden aangepast met data-attributen:

data-video-id	De ID van de video waarmee eerder gemaakte video's kunnen worden bewerkt. De ID is uniek per gebruiker, d.w.z. als twee verschillende gebruikers de editor openen met dezelfde ID, dan worden er twee verschillende video's gemaakt of bewerkt.
gegevens-video-formaat	Het videoformaat. De lijst met alle ondersteunde indelingen is beschikbaar op https://api.wave.video/project/formats Voorbeeld: youtube_horizontal
gegevens-zoek-tekst	De zoekopdracht heeft betrekking op de voorraadbibliotheek of op sjablonen. Als de editor start vanaf de sjablonenpagina, dan is deze query sjablonen zoekparameters. Ga naar de sjablonenpagina, configureer de zoekopdracht en kopieer vervolgens alle parameters uit de url. Als de url bijvoorbeeld is: `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` dan moet data-search-text worden ingesteld op `category=%2FUse-Cases%2FVirtual-Backgrounds&name=strand` Als de editor start vanuit de voorraadbibliotheek, dan wordt deze tekst gebruikt om de voorraden te zoeken.
gegevens-publiceer-label	Het tekstlabel op de knop Publiceren, dat de standaard "Publiceren" overschrijft.
data-publish-video-id	De ID van de videotag die de video ontvangt. Als je een videotag op je pagina hebt, kun je de ID van deze tag opgeven en de editor zal de uiteindelijke video-URL instellen op het `src-attribuut` van deze videotag.
gegevens-navigatie-doel	selecteer-indelingen - opent editor op scherm selecteer-indelingen uploads - opent editor op uploadscherm bewerken - opent editor in het bewerkingsscherm sjablonen - start editor vanaf sjablonenpagina (standaard). data-zoek-tekst kan worden gebruikt om zoekparameters op te geven op de sjabloonpagina
data-publish-callback	Een globale terugbelfunctie. Deze functie wordt aangeroepen wanneer de gebruiker de video opslaat. De functie wordt aangeroepen met de volgende parameters: callback_functie(knop, resultaat, fout) Waar: knop - knopelement resultaat - json met video-URL en miniaturen fout - foutmelding, indien aanwezig Hier is een voorbeeld van de resulterende JSON: { "naam": "naam van het project", "videoUrl": "url naar de mp4", "duur": duur-in-seconden, "width": breedte-van-de-video, "height": hoogte-van-de-video, "size": grootte-van-de-video-in-bytes, "fps": beelden per seconde, "formaat": "video-formaat-geselecteerd-door-gebruiker", "miniaturen": [ { "tijd": 0, "url": "url naar thumbnail op tijdstip 0" }, { "tijd": 2.2, "url": "url naar thumbnail op tijdstip 2.2" }, ] } Merk op dat de video die wordt teruggestuurd van de editor na 3 dagen verloopt. Als je hem langer wilt gebruiken, moet je hem downloaden vanaf deze URL.

Voorbeeld

In het volgende voorbeeld hebben we een knop met een callbackfunctie onWavePublish. Wanneer deze functie wordt aangeroepen, zal de code de URL van het videobestand en de URL's van de miniaturen afdrukken naar de console.

```
<span id="mijn-knop"
```
```
    class="wave-video-knop"
```
```
    data-video-id="mijnpost1"
```

    data-publish-callback="onWavePublish">Maak video</span>

```
<script>
```

functie onWavePublish(knop, resultaat, fout) {

```
Als (fout) {
```
```
    waarschuwing ("Fout:"+fout);
```
```
} anders {
```
```
    Als (result.videoUrl) {
```

        console.log("heb video: ", resultaat);

```
        laat src = result.videoUrl;
```
```
        Laat naam = resultaat.naam;
```
```
        laat duur = resultaat.duur;
```
```
        Laat grootte = result.size;
```
```
        laat width = result.width;
```
```
        laat hoogte = result.height;
```
```
        Laat fps = result.fps;
```

        Laat formaat = resultaat.formaat;

```
        laat k = 0;
```

        for (;k<result.thumbnails.length; k++) {

            Laat url = result.thumbnails[k].url;

            Laat tijd = resultaat.thumbnails[k].tijd;

            console.log("thumbnail op"+tijd+" is"+url);

```
        }
```
```
    } anders {
```

              // wave is gesloten zonder te publiceren, negeren

```
          }
```
```
      }
```
```
  }
```
```
  (functie (d,w,e,c,a) {
```

      laat cf = w[c] = w[c] || {}; cf.apiKey = a;

      var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];sc.async=!0;

      sc.src=cf.embed | 'https://wave.video/editor/embed.js';s.parentNode.insertBefore(sc, s);

  })(document, window, 'script', 'waveconfig', 'YOUR API KEY');

```
</script>
```

Knop Wave.video

1. Maak je knop en voeg deze toe aan je pagina

Je knop instellen

2. Hoe het werkt

3. Pas je knop aan

Voorbeeld