Como incorporar vídeo do YouTube no Fomulário?

[daniel.giacomelli]

Neste tutorial, vamos descobrir como implementar um player do YouTube no Formulário Dinâmico!

Formulário

A abordagem usada neste exemplo, consiste em:

• Utilizar um elemento iframe para exibir o vídeo dentro do Formulário
• Utilizar uma variável para armazenar a URL do vídeo
• Utilizar um código JavaScript para carregar a URL da variável no iframe.

Uma versão semelhante, porém usando um campo de tela ao invés de uma variável para armazenar a URL do vídeo, pode ser conferida neste link.

Variáveis

Vamos usar uma variável do tipo Text para armazenar a URL do vídeo. Neste exemplo, ela será chamada de videoUrl.

Campos

Vamos usar um campo do tipo HtmlElement no Formulário para criar o iframe. Neste campo, preencha a propriedade “Template Html” com a marcação HTML abaixo:

<iframe 
	id="player" 
	frameborder="0" 
	style="width:100%;height:100%"
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen></iframe>

O id utilizado no iframe (“player”) será usado posteriormente para selecionar o elemento via JavaScript.

JavaScript

Na sessão Arquivos JavaScript do Formulário, adicione um arquivo e insira o código a abaixo:

// Atualiza a URL do video do player
function updatePlayer() {
    const form = latromi.formManager.getFormInstance();
    const iframe = document.getElementById('player');
    const url = form.getVariableValue('videoUrl');
    iframe.src = getYouTubeEmbedUrl(url);
}

// Converte link do Youtube para o formato "embed"
function getYouTubeEmbedUrl(address) {

    // NOVO
    if (!address) alert("URL Vazia!")

    const url = new URL(address);

    if (/(www\.)?youtube\.com|youtu\.be/i.test(url.host) === false ||
        url.pathname.toLowerCase().indexOf(/embed/) == 0) {
        return url;
    }

    let videoId;

    if (url.host.toLowerCase() == 'youtu.be') {
        videoId = url.pathname.substring(1);
    }
    else {
        const params = new URLSearchParams(url.search);
        if (params.has('v')) videoId = params.get('v');
    }

    return videoId ? 'https://youtube.com/embed/' + videoId : url;
}

Abrindo Vídeo

Neste ponto, a implementação já está completa. Agora vamos utilizá-la!

Toda vez que você precisar trocar o vídeo do player, basta modificar a variável videoUrl e em seguida chamar a função JavaScript updatePlayer

Veja as instruções passo-a-passo:

1. Adicione uma ação “Popular Campos e Variáveis” em um Procedimento para preencher a variável videoUrl com a URL do vídeo. O valor usado para preencher a variável pode ser fixo ou oriundo do banco de dados, através de uma “Record”.

2. Adiciona uma instrução “Executar Código JavaScript”, e informe o código updatePlayer();

Pronto!

[fernando.vinade]

Bom dia Daniel, segui os passos mas quando informo o link e clico para atualizar (executando o JavaScript), não roda o vídeo. Devo ter deixado escapar algum detalhe…

[daniel.giacomelli]

Olá @fernando.vinade!

Abra a aba de console do navegador (F12), atualize a página e tente novamente.

Se estiver ocorrendo algum erro de JS, será exibido no Console.

Neste caso, poste um Screenshot do erro.

[fernando.vinade]

Ajustei a chamada do botão e foi mas está dando esse erro de validação da URL:

https://www.youtube.com/watch?v=uxuDMKegQUg

[daniel.giacomelli]

@fernando.vinade, a tua URL deve estar chegando vazia na entrada da função getYouTubeEmbedUrl.

Adiciona esta linha no início da função:

// NOVO
if (!address) alert("URL Vazia!")

Já atualizei o exemplo com este código também.

[fernando.vinade]

Agora ele está alertando “URL Vazia” mas inclui a população da variavel.

Quanto a chamada da função, já tentei com “()” e com “(‘INPUT.LinkVideo’)”

[daniel.giacomelli]

@fernando.vinade, a função updatePlayer não espera nenhum parâmetro, então é só com os parênteses mesmo.

O que está acontecendo é que a variável “videoURL” realmente está vazia.

Posta um screenshot do preenchimento da variável

E recapitulando o que é necessário:

1. Ter uma variável chamada “videoURL”.
2. Popular a variável com a URL do vídeo.
3. Chamar a função JavaScript updatePlayer() logo em seguida.

[fernando.vinade]

Cara, to me sentindo burro já hehe, testei com um botão fazendo o preenchimento da variavel e outro chamando o video mas não funciona.

[daniel.giacomelli]

É aí @fernando.vinade!
Relaxa que deve ser uma bobeira! kkk

Dê um duplo-clique na ação “Populate”, e poste um Screenshot do valor que está passado para a variável.

[fernando.vinade]

[daniel.giacomelli]

@fernando.vinade, notei que o nome da sua variável é videoURL, e no código JavaScript do exemplo, é usada a variável videoUrl:

const url = form.getVariableValue('videoUrl');

Note que existe diferença entre letras maiúsculas e minúsculas. Isso faz diferença.

Tente alterar o código JavaScript para que ele acesse a sua variável corretamente:

const url = form.getVariableValue('videoURL');