Documentação | Botão Wave.video

Botão Wave.video

1. Crie o seu botão e adicione-o à sua página

Configure o seu botão e coloque o código do botão onde pretende que apareça na sua página.
Certifique-se de que substitui YOUR_API_KEY pela sua chave de API real.

```
<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">Fazer vídeo</span>

Pré-visualização do seu botãoFazervídeo

2. Como funciona

Ao clicar no botão, o editor Wave.video será iniciado dentro do iframe na sua página. Os seus utilizadores terão de iniciar sessão no Wave.video ou inscrever-se se ainda não tiverem uma conta, tudo isto dentro da iframe. Depois de os utilizadores criarem um vídeo, publicam-no no seu sítio Web.

Existem várias formas de obter o vídeo do editor. A mais simples é especificar o ID da etiqueta de vídeo onde o vídeo será colocado. Outra opção é fornecer uma função de retorno de chamada para receber o URL e as miniaturas do vídeo.

Ver as demonstrações

3. Personalize o seu botão

Pode personalizar o botão utilizando o seu próprio estilo ou pode utilizar os nossos estilos fornecidos. Pode ter vários botões na página, mas todos eles devem ter a classe wave-video-button.

Cada botão pode ser ainda mais personalizado com atributos de dados:

data-video-id	O ID do vídeo que fornece uma forma de editar um vídeo criado anteriormente. O ID é único por utilizador, ou seja, se dois utilizadores diferentes abrirem o editor com o mesmo ID, serão criados ou editados dois vídeos diferentes.
formato de vídeo de dados	O formato de vídeo. A lista de todos os formatos suportados está disponível em https://api.wave.video/project/formats Exemplo: youtube_horizontal
texto de pesquisa de dados	A consulta de pesquisa para a biblioteca de stock ou para os modelos. Se o editor for iniciado a partir da página de modelos, então esta consulta é constituída por parâmetros de pesquisa de modelos. Vá à página de modelos, configure a pesquisa e, em seguida, copie todos os parâmetros do URL. Por exemplo, se o url for: `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` então data-search-text deve ser definido como `category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` Se o editor iniciar a partir da biblioteca de stocks, este texto é utilizado para pesquisar os stocks.
etiqueta de publicação de dados	A etiqueta de texto no botão de publicação, substituindo a predefinição "Publicar".
data-publish-video-id	A ID da etiqueta de vídeo que recebe o vídeo. Se tiver uma etiqueta de vídeo na sua página, pode especificar o ID desta etiqueta e o editor definirá o URL final do vídeo para o atributo `src` desta etiqueta de vídeo.
data-navigation-target	select-formats - abre o editor no ecrã de seleção de formatos uploads - abre o editor no ecrã de upload edit - abre o editor no ecrã de edição templates - inicia o editor a partir da página de templates (predefinição). data-search-text pode ser utilizado para especificar parâmetros de pesquisa na página de templates
data-publish-callback	Uma função global de retorno de chamada. Esta função é chamada quando o utilizador guarda o vídeo. A função é chamada com os seguintes parâmetros: callback_function(botão, resultado, erro) Onde: botão - elemento de botão resultado - json com URL do vídeo e miniaturas erro - mensagem de erro, se existir Aqui está um exemplo do JSON resultante: { "nome": "nome do projeto", "videoUrl": "url para o mp4", "duração": duração em segundos, "largura": largura do vídeo, "altura": altura do vídeo, "size": tamanho do vídeo em bytes, "fps": fotogramas por segundo, "formato": "formato de vídeo selecionado pelo utilizador", "miniaturas": [ { "time": 0, "url": "url para a miniatura na hora 0" }, { "time": 2.2, "url": "url para miniatura na hora 2.2" }, ] } Tenha em atenção que o vídeo que é devolvido pelo editor expira dentro de 3 dias. Se for para ser utilizado durante mais tempo, deve ser descarregado a partir deste URL.

Exemplo

No exemplo seguinte, temos um botão com uma função de retorno de chamada onWavePublish. Quando esta função é chamada, o código imprime na consola o URL do ficheiro de vídeo e os URLs das miniaturas.

```
<span id="meu-botão"
```
```
    class="botão de vídeo de onda"
```
```
    data-video-id="mypost1"
```

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

```
<script>
```

função onWavePublish(botão, resultado, erro) {

```
se (erro) {
```
```
    alert("Erro: "+erro);
```
```
} else {
```
```
    se (result.videoUrl) {
```

        consola.log("vídeo obtido: ", resultado);

```
        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;
```
```
        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 {
```

              // o pacote foi fechado sem publicação, ignorar

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

Botão Wave.video

1. Crie o seu botão e adicione-o à sua página

Configurar o botão

2. Como funciona

3. Personalize o seu botão

Exemplo