Documentación | Botón Wave.video

Botón Wave.video

1. Crea tu botón y añádelo a tu página

Configure su botón y coloque el código del botón donde necesite que aparezca en su página.
Asegúrate de sustituir YOUR_API_KEY por tu clave API real.

```
<script>
```
```
(función (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">Hacer vídeo</span>

Vista previa de tu botónHacervídeo

2. Cómo funciona

Al hacer clic en el botón se iniciará Wave.video editor dentro del iframe en su página. Tus usuarios tendrán que iniciar sesión en Wave.video o registrarse si aún no tienen una cuenta, todo ello dentro del iframe. Después de que tus usuarios creen un vídeo, lo publicarán en tu sitio web.

Hay varias formas de obtener el vídeo del editor. La más sencilla es especificar el ID de la etiqueta de vídeo donde se colocará el vídeo. Otra opción es proporcionar una función de devolución de llamada para recibir la URL y las miniaturas del vídeo.

Ver las demostraciones

3. Personalice su botón

Puede personalizar el botón utilizando su propio estilo o puede utilizar nuestros estilos proporcionados. Puedes tener varios botones en la página, pero todos deben tener la clase wave-video-button.

Cada botón puede personalizarse aún más con atributos de datos:

data-video-id	ID del vídeo que permite editar vídeos creados anteriormente. El ID es único por usuario, es decir, si dos usuarios diferentes abren el editor con el mismo ID, se crearán o editarán dos vídeos diferentes.
formato-datos-vídeo	El formato de vídeo. La lista de todos los formatos compatibles está disponible en https://api.wave.video/project/formats Ejemplo: youtube_horizontal
datos-buscar-texto	La consulta de búsqueda, ya sea para la biblioteca de stock o plantillas. Si el editor se inicia desde la página de plantillas, entonces esta consulta son los parámetros de búsqueda de plantillas. Vaya a la página de plantillas, configure la búsqueda y luego copie todos los parámetros de la url. Por ejemplo, si la url es `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` entonces data-search-text debe establecerse en `category=%2FUse-Cases%2FVirtual-Backgrounds&name=playa` Si el editor parte de la biblioteca de existencias, este texto se utiliza para buscar las existencias.
data-publish-label	La etiqueta de texto del botón de publicación, que sustituye a la predeterminada "Publicar".
data-publish-video-id	El ID de la etiqueta de vídeo que recibe el vídeo. Si tienes una etiqueta de vídeo en tu página, puedes especificar el ID de esta etiqueta y el editor establecerá la URL final del vídeo en el atributo `src` de esta etiqueta de vídeo.
datos-navegación-objetivo	select-formats - abre el editor en la pantalla de selección de formatos uploads - abre el editor en la pantalla uploads edit - abre el editor en la pantalla de edición templates - inicia el editor desde la página de plantillas (por defecto). data-search-text puede utilizarse para especificar parámetros de búsqueda en la página de plantillas
data-publish-callback	Una función global de devolución de llamada. Esta función se llama cuando el usuario guarda el vídeo. La función se llama con los siguientes parámetros: callback_function(botón, resultado, error) Dónde: button - elemento botón result - json con la URL del vídeo y las miniaturas error - mensaje de error, si lo hay He aquí un ejemplo del JSON resultante: { "nombre": "nombre del proyecto", "videoUrl": "url al mp4", "duration": duración en segundos, "width": anchura del vídeo, "height": altura del vídeo, "size": tamaño del vídeo en bytes, "fps": fotogramas por segundo, "formato": "video-format-selected-by-user", "miniaturas": [ { "tiempo": 0, "url": "url a la miniatura en el tiempo 0" }, { "tiempo": 2.2, "url": "url a la miniatura en el tiempo 2.2" }, ] } Tenga en cuenta que el vídeo devuelto por el editor caducará en 3 días. Si desea utilizarlo durante más tiempo, descárguelo desde esta URL.

Ejemplo

En el siguiente ejemplo tenemos un botón con una función callback onWavePublish. Cuando se llame a esta función, el código imprimirá en la consola la URL del archivo de vídeo y las URL de las miniaturas.

```
<span id="mi-botón"
```
```
    class="wave-video-button"
```
```
    data-video-id="mypost1"
```

    data-publish-callback="onWavePublish">Hacer vídeo</span>

```
<script>
```

function onWavePublish(botón, resultado, error) {

```
si (error) {
```
```
    alert("Error: "+error);
```
```
} else {
```
```
    if (result.videoUrl) {
```

        console.log("vídeo obtenido: ", resultado);

```
        let src = result.videoUrl;
```
```
        let nombre = resultado.nombre;
```

        let duración = resultado.duración;

        let tamaño = resultado.tamaño;

        let anchura = resultado.anchura;

```
        let altura = resultado.altura;
```
```
        let fps = resultado.fps;
```

        let formato = resultado.formato;

```
        dejemos k = 0;
```

        for (;k<longitud.miniaturas.resultado; k++) {

            let url = resultado.miniaturas[k].url;

            let tiempo = resultado.miniaturas[k].tiempo;

            console.log("miniatura en "+time+" es "+url);

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

              // ola se cerró sin publicar, ignorar

```
          }
```
```
      }
```
```
  }
```
```
  (función (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', 'TU CLAVE API');

```
</script>
```