Vidéos LuckyTemplates : comment intégrer dans vos rapports

Chez LuckyTemplates, nous avons publié de nombreux tutoriels pour créer des rapports à l'aide des dernières fonctionnalités et techniques de visualisation de LuckyTemplates. Cependant, un sujet fondamental n'a pas encore été vraiment couvert : comment ajouter et lire des vidéos LuckyTemplates dans vos rapports. Vous pouvez regarder la vidéo complète de ce tutoriel au bas de ce blog.

Il existe plusieurs solutions à ce problème. Dans le blog d'aujourd'hui, vous apprendrez comment j'aborde ce problème et d'autres méthodes qui ne fonctionnent tout simplement pas en raison de quelques restrictions auxquelles nous devons faire face.

Table des matières

• Exemple de rapport
• Méthode 1 : Création de boutons pour les vidéos LuckyTemplates
• Méthode 2 : Intégrer une vidéo YouTube
  • Compte Azure Blob Storage pour stocker des vidéos LuckyTemplates
• Méthode 3 : Utilisation d'un stockage de fichiers
  • Utilisation du jeton dans LuckyTemplates
  • Sans le jeton SAS
• Conclusion

Exemple de rapport

Commençons par un exemple de rapport avec une vidéo ajoutée. 

Comme nous pouvons le constater, ce rapport comporte un bouton Lecture qui lit en fait une vidéo hébergée sur un site Web externe, le  Stockage Blob Azure . 

Pour comprendre comment cela fonctionne, regardez la mesure en cliquant sur Vidéos dans le volet Champs. La mesure utilise la balise vidéo HTML et le lien Blob Storage nous menant au fichier vidéo MP4. 

Cela est possible avec le visuel personnalisé HTML CSS Viewer qui nous permet de lire des vidéos dans le rapport.

Mais comment cela a-t-il été fait exactement ? Voici les trois méthodes couramment utilisées par les analystes de données pour intégrer et lire des vidéos LuckyTemplates dans leurs rapports.

Méthode 1 : Création de boutons pour les vidéos LuckyTemplates

L'un des moyens les plus simples d'atteindre notre objectif est d'insérer un bouton dans notre rapport. Nous pouvons le faire en allant sur Insérer, Bouton, puis choisissez Vide dans la liste déroulante. 

Une fois le bouton créé, accédez au volet Formatage et ouvrez Actions. Choisissez URL Web dans le champ Type, puis copiez le lien de la vidéo souhaitée dans le champ URL Web . 

L'URL Web peut être une vidéo hébergée sur YouTube, par exemple. C'est là que l'utilisateur doit se rendre une fois qu'il a cliqué sur le bouton.

Par exemple, lorsque nous cliquons sur le bouton que nous avons créé, nous serons directement redirigés vers notre lien vidéo.

Méthode 2 : Intégrer une vidéo YouTube

Notre première méthode est une manière très simple de le faire, mais parfois, nous voulons avoir la vidéo à l'intérieur du rapport lui-même. 

Certaines personnes se demandent pourquoi nous devons ajouter le bouton si nous pouvions simplement utiliser un lien YouTube à la place. Malheureusement, bien que courante, cette méthode ne fonctionne tout simplement pas. Essayons de voir comment il apparaît.

Commencez par aller sur YouTube, cliquez sur Partager et choisissez Intégrer dans les options.

Nous recevrons un code d'intégration, généralement utilisé pour ajouter des vidéos sur des sites Web. 

Nous pouvons supposer que le même code fonctionnerait également sur notre rapport LuckyTemplates, alors copions le code et créons une nouvelle mesure dans LuckyTemplates.

Cliquez avec le bouton droit sur Vidéo dans le volet Champs et choisissez Nouvelle mesure.

Appelez-le youtube puis collez notre code YouTube dans la ligne suivante comme indiqué ci-dessous. N'oubliez pas que chaque fois que nous ajoutons du code HTML à DAX , nous devons remplacer les guillemets doubles par des guillemets simples. 

Pour simplifier ce processus, mettez simplement en surbrillance l'un des guillemets doubles, puis appuyez sur CTRL + MAJ + L. Cela mettra en surbrillance chaque guillemet double dans le code. 

Ensuite, tapez un guillemet simple pour remplacer chaque guillemet double qui a été supprimé. 

Ensuite, nous ajouterons des guillemets doubles au début et à la fin, nous laissant avec un code qui ressemble à ceci.

Notre nouvelle mesure nous donne ce visuel noir vierge. Nous n'obtenons aucun message d'erreur mais nous pouvons déjà voir que cela ne fonctionnera pas sur le bureau LuckyTemplates et cette méthode ne fonctionne finalement pas. 

Mais que se passerait-il si nous publions ce rapport sur le service LuckyTemplates ?

Contrairement au bureau, nous pouvons réellement voir le message d'erreur lors de l'utilisation d'un navigateur. Ce sera un message d'erreur assez technique, mais regardons-le quand même. 

Ouvrons LuckyTemplates et localisons notre rapport LuckyTemplates enregistré.

Il devrait ouvrir le même visuel que celui que nous avons obtenu dans le bureau LuckyTemplates. La vidéo ne se lit toujours pas, mais dans le navigateur, nous pouvons accéder aux paramètres à partir des trois points dans le coin supérieur droit de l'écran, faire défiler jusqu'à Plus d'outils, puis choisir Outils de développement. 

Chaque navigateur moderne dispose des outils de développement, même s'il peut sembler un peu différent ou se trouver dans une partie différente de votre navigateur. 

Une fois les outils de développement ouverts, nous pouvons voir quelques erreurs, dont certaines proviennent de YouTube.

YouTube génère une erreur car chaque visuel personnalisé est limité dans ses fonctionnalités. Notre visuel est techniquement à l'intérieur d'un élément iframe en bac à sable restreint dans le navigateur avec des fonctionnalités limitées. 

C'est la raison pour laquelle certaines fonctionnalités ne sont tout simplement pas possibles pour nous comme nous le voyons dans notre échantillon. Nous sommes dans une sandbox iframe qui n'autorise pas « la même origine », une combinaison de restrictions de YouTube et de Microsoft. 

Malheureusement, il n'y a pas de solution pour cela, il est donc recommandé d'utiliser un Azure Blob Storage à la place. Cela fonctionne parfaitement dans votre rapport LuckyTemplates et vous permet de contrôler totalement qui et comment les fichiers peuvent être consultés.

Compte Azure Blob Storage pour stocker des vidéos LuckyTemplates

Si vous n'avez pas encore de compte Azure Blob Storage, nous allons parcourir le processus de création d'un tout nouveau compte de stockage dans le portail Azure et vous montrer comment télécharger également des vidéos.

Cela inclut également la génération de liens sécurisés qui ne sont pas publics au cas où vous souhaiteriez restreindre l'accès à vos vidéos.

Méthode 3 : Utilisation d'un stockage de fichiers

Pour commencer, visitez le portail Azure et ouvrez votre abonnement. Dans notre exemple, notre abonnement s'appelle TEST/TEMP. 

Lorsque nous sélectionnons cet abonnement TEST, cela nous amènera à une autre page où nous pourrons cliquer sur Groupes de ressources.

Nous allons ensuite créer un nouveau groupe de ressources vide que nous appellerons test_video . Ensuite, définissons à quel emplacement nous voulons que cela soit créé. Cliquez sur Créer ou sur Entrée.

Nous venons de créer un nouveau groupe de ressources. Et dans ce groupe de ressources, ajoutez un compte de stockage. 

Pour ce faire, cliquez sur Créer puis recherchez « stockage » dans la barre de recherche résultante. 

Choisissez le premier résultat, le compte de stockage de Microsoft, puis cliquez sur Créer.

Ensuite, nous devons définir dans quel abonnement et groupe de ressources le compte doit se trouver. Nous devons également lui donner un nom et sélectionner la région dans laquelle nous nous trouvons. 

Avec chaque ressource Azure, nous pouvons passer en revue de nombreux paramètres, tels que ceux ci-dessous. 

Mais pour ce tutoriel, nous utiliserons les paramètres par défaut car ils fonctionnent très bien pour notre cas spécifique. 

Cliquez donc sur Réviser + créer puis sur Créer dans la page suivante.

Le déploiement d'une nouvelle ressource peut prendre une ou deux minutes. Nous pouvons vérifier les notifications et voir quand il est encore en cours de déploiement.

Une fois déployé, nous pouvons accéder à notre compte de stockage et télécharger la vidéo. 

Nous allons accéder à Accueil et ouvrir l'abonnement et le groupe de ressources appropriés. Nous pouvons alors commencer à y ajouter des vidéos. 

Pour ce faire, ouvrez le compte de stockage. 

Ensuite, cliquez sur Navigateur de stockage (préversion) , Conteneurs Blob et Ajouter un conteneur. 

Nous l'appellerons simplement vidéo . Nous devons également décider de rendre le conteneur privé ou anonyme. 

Pour notre conteneur, optons d'abord pour Privé (pas d'accès anonyme) .

Le Blob (accès en lecture anonyme pour les blobs uniquement) signifie que toute personne disposant de l'URL de la vidéo ou du fichier dans le conteneur peut y accéder, tandis que pour Private (pas d'accès anonyme), il faut un peu plus pour configurer. 

Voici les détails de notre nouveau conteneur.

L'étape suivante consiste à essayer d'y ajouter une vidéo.

Alors, ouvrons notre conteneur vidéo trouvé dans le navigateur de stockage (aperçu). Ensuite, cliquez sur le bouton Télécharger et faites glisser ou déposez notre fichier vidéo.

Le fichier vidéo devrait apparaître. 

Et lorsque nous sélectionnons le fichier vidéo, nous obtiendrons l'URL que nous pouvons copier dans le presse-papiers. Collons-le dans une fenêtre privée (Incognito) pour voir à quoi cela ressemblerait pour un utilisateur externe.

Nous devrions obtenir un message d'erreur en conséquence. En effet, le conteneur Blob est défini sur privé et nous n'y avons pas accès. 

Alors, comment résolvons-nous ce problème? Comment accéder à la vidéo ? 

Nous devons ouvrir Microsoft Azure et revenir à test_video.

Ensuite, ouvrez le navigateur de stockage (aperçu) et les conteneurs Blob .  

Ce que nous voulons faire, c'est ajouter un jeton SAS à l'ensemble du conteneur. Nous le ferons en cliquant sur les trois points à droite et en choisissant Générer SAS. 

Nous souhaitons également définir la date de validité de notre jeton d'aujourd'hui jusqu'à l'année prochaine. Ensuite, nous pouvons générer un jeton SAS et une URL.

Cela créera un jeton sous la forme d'une chaîne sous le bouton Générer un jeton SAS et une URL . C'est le jeton dont nous devons nous souvenir et copier.

Revenons maintenant à notre fenêtre privée avec l'URL précédente. Cela ne devrait toujours pas fonctionner comme indiqué ci-dessous.

Mais lorsque nous ajoutons un point d'interrogation à la fin de l'URL, puis collons le jeton, il authentifiera l'URL afin que nous puissions accéder aux blobs dans notre conteneur.

Avec le jeton ajouté, nous pouvons maintenant lire la vidéo. Cela signifie que l'URL avec le jeton est ce que nous pouvons également utiliser pour notre rapport. 

Utilisation du jeton dans LuckyTemplates

Revenons à notre rapport LuckyTemplates et créons une nouvelle page 

Nous avons la mesure précédente que nous avons appelée youtube qui ressemble à ceci. 

Nous allons réutiliser et mettre à jour cette mesure pour commencer à travailler cette fois. 

Conservez la balise vidéo et définissez que nous voulons que la vidéo remplisse cent pour cent de l'espace du visuel (width=100%) . Ajoutez également les contrôles , qui incluent les boutons dédiés pour la lecture, la pause, etc. 

Plus important encore, ajoutez la nouvelle source ou l'URL avec le jeton SAS ajouté. 

Ensuite, nous ajoutons la visionneuse HTML CSS à partir du volet Visualisations et cliquez sur Vidéo sous le volet Champs. 

En fin de compte, la vidéo devrait maintenant apparaître sur notre page, nous permettant de lire la vidéo que nous avons téléchargée sur le Blob Storage.

Notez que cela fonctionne en privé, nous avons donc besoin du jeton SAS. Sinon, nous n'aurons toujours pas accès à la vidéo. 

Sans le jeton SAS

Passons rapidement en revue le processus sur la façon dont vous feriez cela sans le jeton SAS.

Revenez à notre compte de stockage pour mettre à jour la confidentialité de notre conteneur vidéo. Au lieu de Private, changeons-le en Blobs (accès en lecture anonyme pour les blobs uniquement) . Ensuite, cliquez sur OK.

Pour en revenir à notre rapport, nous pouvons supprimer le jeton et nous attendre à pouvoir toujours voir et lire la vidéo. 

Changer la confidentialité de notre conteneur vidéo signifie également que toute personne disposant du lien peut accéder à la vidéo. Par exemple, si nous plaçons l'URL dans notre navigateur, la vidéo devrait toujours être lue même sans le jeton.

Visual personnalisé dans LuckyTemplates : découvrez comment contrôler les propriétés de police dans DAX
Créer un rapport vide à l'aide du générateur de rapports LuckyTemplates
Générateur de rapports dans LuckyTemplates : mise en forme des objets et des visualisations

Conclusion

L'intégration directe de vidéos YouTube dans les rapports LuckyTemplates n'est pas possible en raison des restrictions de Microsoft et de YouTube. 

Un moyen simple de résoudre ce problème consiste à ajouter des boutons avec des hyperliens vers les vidéos. Cela fonctionne sans aucun visuel personnalisé et est compatible avec les vidéos YouTube ou les vidéos de Blob Storage.

Mais si vous souhaitez que votre vidéo soit intégrée dans le rapport, l'approche la plus conviviale consiste à utiliser un Azure Blob Storage. Il est facile à installer, pratique et relativement bon marché.

Vous pouvez appliquer ce que vous avez appris aujourd'hui pour créer votre prochain rapport LuckyTemplates. Par exemple, vous trouverez utile d'ajouter une vidéo d'aide à l'utilisateur final du développeur pour expliquer comment le rapport doit être utilisé. Il y a beaucoup plus d'applications pour les vidéos sur LuckyTemplates, et vous pouvez maintenant en profiter.

Tous mes vœux,

Pascal Kieffer