Vídeos do LuckyTemplates: como incorporar em seus relatórios

No LuckyTemplates, publicamos muitos tutoriais para criar relatórios usando os recursos e técnicas de visualização mais recentes do LuckyTemplates. No entanto, um tópico fundamental ainda não foi realmente abordado: como adicionar e reproduzir vídeos do LuckyTemplates em seus relatórios. Você pode assistir ao vídeo completo deste tutorial na parte inferior deste blog.

Existem algumas soluções para esse problema. No blog de hoje, você aprenderá como abordo esse problema e alguns outros métodos que simplesmente não funcionam devido a algumas restrições com as quais temos que lidar.

Índice

• Relatório de amostra
• Método 1: Criando botões para vídeos do LuckyTemplates
• Método 2: Incorporar um vídeo do YouTube
  • Conta de Armazenamento de Blobs do Azure para armazenar vídeos do LuckyTemplates
• Método 3: usando um armazenamento de arquivos
  • Usando o token no LuckyTemplates
  • Sem o token SAS
• Conclusão

Relatório de amostra

Vamos começar com um exemplo de relatório com um vídeo adicionado. 

Como podemos ver, este relatório tem um botão Reproduzir que, na verdade, reproduz um vídeo hospedado em um site externo — o  Azure Blob Storage . 

Para entender como funciona, veja a medida clicando em Vídeos no Painel de Campos. A medida usa a tag de vídeo HTML e o link Blob Storage que nos leva ao arquivo de vídeo MP4. 

Isso é possível com o visual personalizado HTML CSS Viewer , que nos permite reproduzir vídeos no relatório.

Mas como exatamente isso foi feito? Aqui estão os três métodos comuns usados ​​pelos analistas de dados para incorporar e reproduzir vídeos do LuckyTemplates em seus relatórios.

Método 1: Criando botões para vídeos do LuckyTemplates

Uma das maneiras mais simples de atingir nosso objetivo é inserir um botão em nosso relatório. Podemos fazer isso indo em Inserir, Botão e, em seguida, escolher Em branco no menu suspenso. 

Depois que o botão for criado, vá para o Painel de Formatação e abra Ações. Escolha URL da Web no campo Tipo e copie o link do vídeo pretendido para o campo URL da Web . 

A URL da web pode ser um vídeo hospedado no YouTube, por exemplo. É para lá que o usuário deve ir assim que clicar no botão.

Por exemplo, quando clicarmos no botão que criamos, seremos levados direto para o link do nosso vídeo.

Método 2: Incorporar um vídeo do YouTube

Nosso primeiro método é uma maneira muito simples de fazer isso, mas às vezes queremos ter o vídeo dentro do próprio relatório. 

Algumas pessoas se perguntam por que precisamos adicionar o botão se podemos usar apenas um link do YouTube. Infelizmente, embora comum, esse método simplesmente não funciona. Vamos tentar e ver como ele aparece.

Comece acessando o YouTube, clique em Compartilhar e escolha Incorporar nas opções.

Receberemos um código de incorporação, normalmente usado para adicionar vídeos em sites. 

Podemos supor que o mesmo código também funcionaria em nosso relatório do LuckyTemplates, então vamos copiar o código e criar uma nova medida no LuckyTemplates.

Clique com o botão direito em Vídeo no Painel de Campos e escolha Nova Medida.

Chame-o de youtube e cole nosso código do YouTube na próxima linha, conforme mostrado abaixo. Lembre-se de que sempre que adicionamos código HTML ao DAX , precisamos substituir as aspas duplas por aspas simples. 

Para simplificar esse processo, simplesmente destaque uma das aspas duplas e pressione CTRL + SHIFT + L. Isso destacará todas as aspas duplas no código. 

Em seguida, digite uma aspa simples para substituir todas as aspas duplas que foram excluídas. 

Em seguida, adicionaremos aspas duplas no início e no final, deixando-nos com um código parecido com este.

Nossa nova medida nos dá esse visual preto em branco. Não recebemos nenhuma mensagem de erro, mas já podemos ver que ele não será reproduzido na área de trabalho do LuckyTemplates e, em última análise, esse método não funciona. 

Mas o que aconteceria se publicássemos esse relatório no serviço LuckyTemplates?

Ao contrário da área de trabalho, podemos ver a mensagem de erro ao usar um navegador. Será uma mensagem de erro bastante técnica, mas vamos examiná-la de qualquer maneira. 

Vamos abrir o LuckyTemplates e localizar nosso relatório salvo do LuckyTemplates.

Ele deve abrir o mesmo visual que obtivemos na área de trabalho do LuckyTemplates. O vídeo ainda não é reproduzido, mas no navegador, podemos ir para Configurações nos três pontos no canto superior direito da tela, rolar para baixo até Mais ferramentas e escolher Ferramentas do desenvolvedor. 

Todo navegador moderno possui as Ferramentas do desenvolvedor, embora possam parecer um pouco diferentes ou estar localizadas em uma parte diferente do navegador. 

Depois que as ferramentas do desenvolvedor são abertas, podemos ver alguns erros, alguns dos quais são provenientes do YouTube.

O YouTube está apresentando um erro porque cada visual personalizado tem funcionalidade restrita. Nosso visual está tecnicamente dentro de um elemento iframe restrito em área restrita no navegador com funcionalidade limitada. 

Essa é a razão pela qual algumas funcionalidades simplesmente não são possíveis para nós, como vemos em nosso exemplo. Estamos em um iframe sandbox que não “ permite mesma origem ”, uma combinação de restrições do YouTube e da Microsoft. 

Infelizmente, não há solução alternativa para isso, portanto, é recomendável usar um Armazenamento de Blob do Azure. Ele funciona perfeitamente em seu relatório do LuckyTemplates e permite que você tenha controle total sobre quem e como os arquivos podem ser acessados.

Conta de Armazenamento de Blobs do Azure para armazenar vídeos do LuckyTemplates

Caso você ainda não tenha uma conta de Armazenamento de Blob do Azure, iremos percorrer o processo de criação de uma nova conta de armazenamento no portal do Azure e mostrar como carregar vídeos também.

Isso também inclui a geração de links seguros que não são públicos para o mundo, caso você queira restringir o acesso aos seus vídeos.

Método 3: usando um armazenamento de arquivos

Para começar, visite o Portal do Azure e abra sua assinatura. Em nosso exemplo, nossa assinatura é chamada TEST/TEMP. 

Quando selecionamos esta assinatura TEST, ela nos levará a outra página onde podemos clicar em Grupos de recursos.

Em seguida , criaremos um novo grupo de recursos vazio que chamaremos de test_video . Então, vamos definir em qual local queremos que isso seja criado. Clique em Criar ou Entrar.

Acabamos de criar um novo grupo de recursos. E dentro desse grupo de recursos, adicione uma conta de armazenamento. 

Para fazer isso, clique em Criar e pesquise “ armazenamento” na barra de pesquisa resultante. 

Escolha o primeiro resultado, a Conta de Armazenamento da Microsoft, e clique em Criar.

Em seguida, precisamos definir em qual subscrição e grupo de recursos a conta deve estar. Também devemos dar um nome a ela e selecionar a região em que estamos. 

Com cada recurso do Azure, há muitas configurações pelas quais podemos passar, como as abaixo. 

Mas para este tutorial, usaremos as configurações padrão porque elas funcionam muito bem para o nosso caso específico. 

Portanto, clique em Revisar + criar e, em seguida, Criar na próxima página.

A implantação de um novo recurso pode levar um ou dois minutos. Podemos verificar as notificações e ver quando ainda está sendo implantado.

Depois de implantado, podemos acessar nossa conta de armazenamento e fazer upload do vídeo. 

Iremos para Home e abriremos a assinatura apropriada e o grupo de recursos. Podemos então começar a adicionar vídeos a ele. 

Para fazer isso, abra a conta de armazenamento. 

Em seguida, clique em Navegador de armazenamento (versão prévia) , Contêineres de blob e Adicionar contêiner. 

Vamos simplesmente chamá-lo de vídeo . Também precisamos decidir se o contêiner será privado ou anônimo. 

Para nosso contêiner, vamos primeiro optar por Privado (sem acesso anônimo) .

O Blob (acesso de leitura anônimo apenas para blobs) significa que todos com o URL para o vídeo ou o arquivo dentro do contêiner podem acessá-lo, enquanto para Privado (sem acesso anônimo), é necessário um pouco mais para configurar. 

Aqui estão os detalhes do nosso novo contêiner.

O próximo passo é tentar adicionar um vídeo a ele.

Então, vamos abrir nosso contêiner de vídeo encontrado no navegador de armazenamento (pré-visualização). Em seguida, clique no botão Upload e arraste ou solte nosso arquivo de vídeo.

O arquivo de vídeo deve aparecer. 

E quando selecionarmos o arquivo de vídeo, obteremos o URL que podemos copiar para a área de transferência. Vamos colá-lo em uma janela privada (anônima) para ver como ficaria para um usuário externo.

Devemos receber uma mensagem de erro como resultado. Isso ocorre porque o contêiner Blob está definido como privado e não temos acesso a ele. 

Então, como resolvemos esse problema? Como podemos acessar o vídeo? 

Precisamos abrir o Microsoft Azure e voltar para test_video.

Em seguida, abra o navegador de armazenamento (visualização) e os contêineres de Blob .  

O que queremos fazer é adicionar um token SAS a todo o contêiner. Faremos isso clicando nos três pontos à direita e escolhendo Gerar SAS. 

Também queremos definir a data de validade do nosso token de hoje até o próximo ano. Então, podemos gerar token SAS e URL.

Isso criará um token na forma de uma string no botão Generate SAS token and URL . Esse é o token que precisamos lembrar e copiar.

Agora, vamos voltar para nossa janela privada com a URL anterior. Ainda não deve funcionar como mostrado abaixo.

Mas quando adicionamos um ponto de interrogação no final da URL e colamos o token, ele autentica a URL para que possamos acessar os blobs em nosso contêiner.

Com o token adicionado, agora podemos reproduzir o vídeo. Isso significa que a URL com o token é o que também podemos usar para o nosso relatório. 

Usando o token no LuckyTemplates

Vamos voltar ao nosso relatório do LuckyTemplates e criar uma nova página 

Temos a medida anterior que chamamos de youtube que se parece com isso. 

Vamos reutilizar e atualizar esta medida para começar a trabalhar desta vez. 

Retenha a tag de vídeo e defina que queremos que o vídeo preencha cem por cento do espaço do visual (largura=100%) . Adicione também os controles , que incluem os botões dedicados para reproduzir, pausar e assim por diante. 

Mais importante ainda, adicione a nova fonte ou a URL com o token SAS adicionado a ela. 

Em seguida, adicionamos o HTML CSS Viewer no Painel de Visualizações e clicamos em Vídeo no Painel de Campos. 

Por fim, o vídeo agora deve aparecer em nossa página, permitindo-nos reproduzir o vídeo que carregamos no Blob Storage.

Observe que isso funciona em privado, portanto, precisamos ter o token SAS. Caso contrário, ainda não teremos acesso ao vídeo. 

Sem o token SAS

Vamos passar rapidamente pelo processo de como você faria isso sem o token SAS.

Volte para nossa conta de armazenamento para atualizar a privacidade de nosso contêiner de vídeo. Em vez de Private, vamos alterá-lo para Blobs (acesso de leitura anônimo apenas para blobs) . Em seguida, clique em OK.

Voltando ao nosso relatório, podemos remover o token e esperar que ainda possamos visualizar e reproduzir o vídeo. 

Alterar a privacidade do nosso contêiner de vídeo também significa que todos com o link podem acessar o vídeo. Por exemplo, se colocarmos o URL em nosso navegador, o vídeo ainda deve ser reproduzido mesmo sem o token.

Visual personalizado no LuckyTemplates: aprenda a controlar as propriedades da fonte no DAX
Crie um relatório em branco usando o Construtor de relatórios do LuckyTemplates
Construtor de relatórios no LuckyTemplates: Formatando objetos e visualizações

Conclusão

A incorporação direta de vídeos do YouTube em relatórios do LuckyTemplates não é possível devido às restrições da Microsoft e do YouTube. 

Uma maneira fácil de resolver esse problema é adicionar botões com hiperlinks aos vídeos. Isso funciona sem nenhum visual personalizado e é compatível com vídeos do YouTube ou vídeos do Blob Storage.

Mas se você quiser que seu vídeo seja incorporado ao relatório, a abordagem mais amigável é usar um Armazenamento de Blob do Azure. É fácil de configurar, conveniente e também relativamente barato.

Você pode aplicar o que aprendeu hoje ao criar seu próximo relatório do LuckyTemplates. Por exemplo, você achará útil adicionar um vídeo de ajuda ao usuário final do desenvolvedor para explicar como o relatório deve ser usado. Existem muito mais aplicativos para vídeos no LuckyTemplates e agora você pode aproveitá-los.

Tudo de bom,

Pascal Kiefer