Dokumentation | Wave.video Schaltfläche

Schaltfläche Wave.video

1. Erstellen Sie Ihre Schaltfläche und fügen Sie sie zu Ihrer Seite hinzu

Richten Sie Ihre Schaltfläche ein und platzieren Sie den Schaltflächencode dort, wo er auf Ihrer Seite erscheinen soll.
Stellen Sie sicher, dass Sie YOUR_API_KEY durch Ihren tatsächlichen API-Schlüssel ersetzen.

```
<script>
```
```
(Funktion (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-button large default"

data-video-format="youtube_horizontal">Video machen</span>

Vorschau IhrerSchaltflächeVideoerstellen

2. Wie es funktioniert

Wenn Sie auf die Schaltfläche klicken, wird der Wave.video-Editor innerhalb des Iframe auf Ihrer Seite gestartet. Ihre Nutzer müssen sich entweder bei Wave.video anmelden oder sich registrieren, wenn sie noch kein Konto haben, und das alles innerhalb des iframe. Nachdem Ihre Nutzer ein Video erstellt haben, veröffentlichen sie es auf Ihrer Website.

Es gibt mehrere Möglichkeiten, das Video aus dem Editor zu holen. Die einfachste ist die Angabe der Video-Tag-ID, an der das Video platziert werden soll. Eine andere Möglichkeit ist die Bereitstellung einer Callback-Funktion, um die URL und die Miniaturbilder des Videos zu erhalten.

Siehe die Demos

3. Passen Sie Ihre Schaltfläche an

Sie können die Schaltfläche mit Ihrem eigenen Stil anpassen oder unsere bereitgestellten Stile verwenden. Sie können mehrere Schaltflächen auf der Seite haben, aber sie sollten alle die Klasse wave-video-button haben.

Jede Schaltfläche kann mit Daten-Attributen weiter angepasst werden:

data-video-id	Die ID des Videos, das die Möglichkeit bietet, ein zuvor erstelltes Video zu bearbeiten. Die ID ist pro Benutzer eindeutig, d.h. wenn zwei verschiedene Benutzer den Editor mit der gleichen ID öffnen, werden zwei verschiedene Videos erstellt oder bearbeitet.
data-video-format	Das Videoformat. Die Liste aller unterstützten Formate finden Sie unter https://api.wave.video/project/formats. Beispiel: youtube_horizontal
daten-suchen-text	Die Suchanfrage bezieht sich entweder auf die Bestandsbibliothek oder auf Vorlagen. Wenn der Editor von der Seite templates startet, dann ist diese Abfrage die Suchparameter für templates. Gehen Sie auf die Seite templates, konfigurieren Sie die Suche und kopieren Sie dann alle Parameter aus der Url. Wenn die Url zum Beispiel lautet: `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` dann sollte data-search-text auf `category=%2FUse-Cases%2FVirtuelle-Hintergründe&name=strand` Wenn der Editor von der Aktienbibliothek ausgeht, wird dieser Text für die Suche nach den Aktien verwendet.
data-publish-label	Die Textbeschriftung der Schaltfläche "Veröffentlichen", die die Standardeinstellung "Veröffentlichen" überschreibt.
data-publish-video-id	Die ID des Video-Tags, das das Video empfängt. Wenn Sie ein Video-Tag auf Ihrer Seite haben, können Sie die ID dieses Tags angeben, und der Editor wird die endgültige Video-URL auf das `src-Attribut` dieses Video-Tags setzen.
daten-navigation-ziel	Formate auswählen - öffnet den Editor auf dem Bildschirm "Formate auswählen Uploads - öffnet den Editor auf dem Upload-Bildschirm edit - öffnet den Editor im Bearbeitungsbildschirm templates - öffnet den Editor auf der Seite templates (Standard). data-search-text kann verwendet werden, um Suchparameter auf der Seite template anzugeben
data-publish-callback	Eine globale Callback-Funktion. Diese Funktion wird aufgerufen, wenn der Benutzer das Video speichert. Die Funktion wird mit den folgenden Parametern aufgerufen: callback_function(Taste, Ergebnis, Fehler) Wo: Schaltfläche - Schaltflächenelement result - json mit Video-URL und Miniaturansichten error - Fehlermeldung, falls vorhanden Hier ist ein Beispiel für das resultierende JSON: { "Name": "Name des Projekts", "videoUrl": "url zur mp4-Datei", "Dauer": Dauer in Sekunden, "Breite": Breite des Videos, "Höhe": Höhe des Videos, "Größe": Größe des Videos in Bytes, "fps": Bilder pro Sekunde, "Format": "vom Benutzer ausgewähltes Videoformat", "Vorschaubilder": [ { "time": 0, "url": "url zum Thumbnail zum Zeitpunkt 0" }, { "time": 2.2, "url": "url to thumbnail at time 2.2" }, ] } Beachten Sie, dass das vom Editor zurückgegebene Video in 3 Tagen abläuft. Wenn es länger verwendet werden soll, sollte es von dieser URL heruntergeladen werden.

Beispiel

Im folgenden Beispiel haben wir eine Schaltfläche mit einer Callback-Funktion onWavePublish. Wenn diese Funktion aufgerufen wird, gibt der Code die URL der Videodatei und die URLs der Miniaturansichten auf der Konsole aus.

```
<span id="my-button"
```
```
    class="wave-video-button"
```
```
    data-video-id="mypost1"
```

    data-publish-callback="onWavePublish">Video machen</span>

```
<script>
```

function onWavePublish(button, result, error) {

```
wenn (Fehler) {
```
```
    alert("Fehler: "+Fehler);
```
```
} sonst {
```
```
    if (result.videoUrl) {
```

        console.log("got video: ", result);

```
        let src = result.videoUrl;
```
```
        let name = result.name;
```
```
        let duration = result.duration;
```
```
        let size = result.size;
```
```
        let width = result.width;
```
```
        let height = result.height;
```
```
        let fps = result.fps;
```
```
        let format = result.format;
```
```
        sei k = 0;
```

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

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

            let time = result.thumbnails[k].time;

            console.log("Thumbnail bei "+Uhrzeit+" ist "+url);

```
        }
```
```
    } sonst {
```

              // Welle wurde ohne Veröffentlichung geschlossen, ignorieren

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

      let 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>
```