Documentazione | Pulsante Wave.video

Pulsante Wave.video

1. Creare il pulsante e aggiungerlo alla pagina

Impostare il pulsante e inserire il codice del pulsante nel punto della pagina in cui si desidera che appaia.
Assicuratevi di sostituire YOUR_API_KEY con la vostra chiave API effettiva.

```
<script>
```
```
(funzione (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">Fai il video</span>

L'anteprima del vostro pulsanteRealizzare unvideo

2. Come funziona

Facendo clic sul pulsante si avvierà l'editor di Wave.video all'interno dell'iframe della pagina. Gli utenti dovranno accedere a Wave.video o registrarsi se non hanno ancora un account, il tutto all'interno dell'iframe. Dopo aver creato un video, gli utenti lo pubblicano sul vostro sito web.

Esistono diversi modi per ottenere il video dall'editor. Il più semplice è quello di specificare l'ID del tag video, dove il video verrà inserito. Un'altra opzione è quella di fornire una funzione di callback per ricevere l'URL e le miniature del video.

Vedere le dimostrazioni

3. Personalizzare il pulsante

È possibile personalizzare il pulsante utilizzando il proprio stile o utilizzare gli stili forniti. È possibile avere diversi pulsanti nella pagina, ma tutti devono avere la classe wave-video-button.

Ogni pulsante può essere ulteriormente personalizzato con attributi dati:

dati-video-id	L'ID del video che consente di modificare i video creati in precedenza. L'ID è unico per ogni utente, cioè se due utenti diversi aprono l'editor con lo stesso ID, verranno creati o modificati due video diversi.
dati-video-formato	Il formato video. L'elenco di tutti i formati supportati è disponibile all'indirizzo https://api.wave.video/project/formats. Esempio: youtube_horizontal
dati-ricerca-testo	La query di ricerca è per la libreria stock o per i modelli. Se l'editor parte dalla pagina dei modelli, la query è costituita dai parametri di ricerca dei modelli. Andare alla pagina dei modelli, configurare la ricerca e poi copiare tutti i parametri dall'url. Ad esempio, se l'url è: `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` allora data-search-text deve essere impostato a `category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` Se l'editor parte dalla libreria delle scorte, questo testo viene utilizzato per cercare le scorte.
dati-pubblicazione-etichetta	L'etichetta di testo del pulsante di pubblicazione, che sostituisce il valore predefinito "Pubblica".
dati-pubblicazione-video-id	L'ID del tag video che riceve il video. Se nella pagina è presente un tag video, è possibile specificare l'ID di questo tag e l'editor imposterà l'URL finale del video sull'attributo `src` di questo tag video.
dati-navigazione-target	select-formats - apre l'editor nella schermata di selezione dei formati uploads - apre l'editor nella schermata di upload edit - apre l'editor nella schermata di modifica templates - avvia l'editor dalla pagina templates (default). data-search-text può essere usato per specificare i parametri di ricerca nella pagina template
dati-pubblicati-callback	Una funzione globale di callback. Questa funzione viene richiamata quando l'utente salva il video. La funzione viene chiamata con i seguenti parametri: callback_function(pulsante, risultato, errore) Dove: pulsante - elemento pulsante result - json con URL e miniature del video error - messaggio di errore, se presente Ecco un esempio di JSON risultante: { "Nome": "nome del progetto", "videoUrl": "url dell'mp4", "duration": durata in secondi, "width": larghezza del video, "height": altezza del video, "size": dimensione del video in byte, "fps": fotogrammi al secondo, "formato": "formato video selezionato dall'utente", "miniature": [ {"time": 0, "url": "url alla miniatura al momento 0" }, {"time": 2.2, "url": "url alla miniatura al momento 2.2" }, ] } Si noti che il video restituito dall'editor scadrà tra 3 giorni. Se si desidera utilizzarlo più a lungo, è necessario scaricarlo da questo URL.

Esempio

Nell'esempio seguente abbiamo un pulsante con una funzione di callback onWavePublish. Quando questa funzione viene richiamata, il codice stampa nella console l'URL del file video e gli URL delle miniature.

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

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

```
<script>
```

function onWavePublish(button, result, error) {

```
se (errore) {
```
```
    alert("Errore: "+errore);
```
```
} else {
```
```
    if (result.videoUrl) {
```

        console.log("video ottenuto: ", risultato);

```
        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;
```
```
        lasciare k = 0;
```

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

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

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

            console.log("miniatura a "+ora+" è "+url);

```
        }
```
```
    } else {
```

              // l'onda è stata chiusa senza pubblicazione, ignorare

```
          }
```
```
      }
```
```
  }
```
```
  (funzione (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>
```