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>
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.
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. 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:
então data-search-text deve ser definido como
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 |
data-navigation-target | select-formats - abre o editor no ecrã de seleção de formatos |
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:
Onde: botão - elemento de botão Aqui está um exemplo do JSON resultante:
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>