Documentation | Wave.video bouton

Bouton Wave.video

1. Créez votre bouton et ajoutez-le à votre page

Configurez votre bouton et placez le code du bouton à l'endroit où vous souhaitez qu'il apparaisse sur votre page.
Veillez à remplacer YOUR_API_KEY par votre véritable clé API.

```
<script>
```
```
(function (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">Faire une vidéo</span>

Aperçu de votre boutonFaire unevidéo

2. Le fonctionnement

En cliquant sur le bouton, vous lancerez l'éditeur Wave.video à l'intérieur de l'iframe sur votre page. Vos utilisateurs devront se connecter à Wave.video ou s'inscrire s'ils n'ont pas encore de compte, le tout à l'intérieur de l'iframe. Une fois que vos utilisateurs ont créé une vidéo, ils la publient sur votre site web.

Il existe plusieurs façons d'obtenir la vidéo à partir de l'éditeur. La plus simple consiste à spécifier l'identifiant de la balise vidéo où la vidéo sera placée. Une autre option consiste à fournir une fonction de rappel pour recevoir l'URL et les vignettes de la vidéo.

Voir les démonstrations

3. Personnalisez votre bouton

Vous pouvez personnaliser le bouton en utilisant votre propre style ou vous pouvez utiliser nos styles fournis. Vous pouvez avoir plusieurs boutons sur la page, mais ils doivent tous avoir la classe wave-video-button.

Chaque bouton peut être personnalisé avec des attributs de données:

data-video-id	L'identifiant de la vidéo qui permet d'éditer une vidéo créée précédemment. L'ID est unique par utilisateur, c'est-à-dire que si deux utilisateurs différents ouvrent l'éditeur avec le même ID, deux vidéos différentes seront créées ou modifiées.
data-video-format	Le format vidéo. La liste de tous les formats pris en charge est disponible à l'adresse suivante : https://api.wave.video/project/formats Exemple : youtube_horizontal
data-search-text	La recherche porte soit sur la bibliothèque de stocks, soit sur les modèles. Si l'éditeur démarre à partir de la page des modèles, cette requête correspond aux paramètres de recherche des modèles. Allez sur la page des modèles, configurez la recherche et copiez tous les paramètres de l'url. Par exemple, si l'url est : `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` le texte de recherche des données doit alors être défini comme suit `category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` Si l'éditeur démarre à partir de la bibliothèque des stocks, ce texte est utilisé pour rechercher les stocks.
data-publish-label	Le texte de l'étiquette du bouton de publication, qui remplace le texte par défaut "Publier".
data-publish-video-id	ID de la balise vidéo qui reçoit la vidéo. Si vous avez une balise vidéo sur votre page, vous pouvez spécifier l'ID de cette balise et l'éditeur définira l'URL finale de la vidéo dans l'attribut `src` de cette balise vidéo.
data-navigation-target	select-formats - ouvre l'éditeur sur l'écran de sélection des formats uploads - ouvre l'éditeur dans l'écran de téléchargement edit - ouvre l'éditeur dans l'écran d'édition templates - démarre l'éditeur à partir de la page des modèles (par défaut). data-search-text peut être utilisé pour spécifier des paramètres de recherche sur la page des modèles.
data-publish-callback	Une fonction globale de rappel. Cette fonction est appelée lorsque l'utilisateur enregistre la vidéo. La fonction est appelée avec les paramètres suivants : callback_function(button, result, error) Où ? button - élément de bouton result - json avec l'URL de la vidéo et les vignettes error - message d'erreur, le cas échéant Voici un exemple de JSON résultant : { "nom" : "nom du projet", "videoUrl" : "url du mp4", "duration" : durée en secondes, "width" : largeur de la vidéo, "hauteur" : hauteur de la vidéo, "size" : taille de la vidéo en octets, "fps" : images par seconde, "format" : "video-format-selected-by-user", "thumbnails" : [ { "time" : 0, "url" : "url to thumbnail at time 0" }, {"time" : 2.2, "url" : "url to thumbnail at time 2.2" }, ] } Notez que la vidéo renvoyée par l'éditeur expirera dans 3 jours. Si elle doit être utilisée plus longtemps, elle doit être téléchargée à partir de cette URL.

Exemple

Dans l'exemple suivant, nous avons un bouton avec une fonction de rappel onWavePublish. Lorsque cette fonction est appelée, le code imprime sur la console l'URL du fichier vidéo et les URL des vignettes.

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

    data-publish-callback="onWavePublish">Faire une vidéo</span>

```
<script>
```

function onWavePublish(button, result, error) {

```
if (error) {
```
```
    alert("Erreur : "+erreur) ;
```
```
} else {
```
```
    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 ;
```
```
        Soit k = 0 ;
```

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

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

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

            console.log("thumbnail at "+time+" is "+url) ;

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

              // la vague a été fermée sans publication, ignorer

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