Quand on travaille dans un document HTML5 Canvas, on peut utiliser un ensemble complet de composants pour cette plateforme.
Ils sont disponibles dans le panneau Composants.
Pour accéder au panneau Composants, choisissez Fenêtre > Composants.
Dans ce panneau Composants nous avons Interface utilisateur, Vidéo et Interface utilisateur jQuery.
Je développe l'ensemble de composants Vidéo, qui contient un seul composant nommé Vidéo.
Vous pouvez faire glisser une instance de ce composant sur la scène, puis modifier ses propriétés.
L'instance du composant Vidéo étant toujours sélectionnée, modifions la position et la taille.
Je définis une position X d'environ 681,00 et une position Y de 50,00.
Je règle également la largeur à 550,00 et la hauteur à environ 309,00.
L'instance du composant Vidéo couvre maintenant le panneau d'affichage en arrière-plan.
Nous avons maintenant besoin d'un fichier vidéo à lire dans cette instance de composant Vidéo.
Nous avons ici un fichier MP4, que nous pouvons utiliser à cette fin.
Pour lire ce fichier dans notre instance de composant Vidéo, qui est toujours sélectionnée sur la scène, survolez Param. d’exposition dans le panneau Propriétés.
Il donne accès aux composants HTML5 Canvas disponibles sur la scène, ainsi qu'à leurs propriétés.
Un clic sur ce bouton ouvre le panneau Paramètres de composant, dans lequel nous pouvons définir la lecture automatique, les commandes, la coupure du son et la lecture en boucle.
Je désactive les commandes, mais je conserve la lecture automatique, je coupe le son, même s'il n'y en a pas dans ce fichier, et j'active la lecture en boucle.
Le paramètre le plus important est la source.
Nous devons pointer vers le fichier MP4 ici.
Je vais donc cliquer sur cette icône Modifier, puis sélectionner ma source.
Voici le fichier HippoVideo.mp4 que nous avons vu précédemment.
Ouvrir.
La source pointe maintenant vers cette vidéo.
Je décoche la case Respecter les dimensions du fichier source, car je veux que le composant conserve les dimensions que nous avons définies, et je clique sur OK.
Testons cette animation en choisissant Contrôle > Tester.
Voici le rendu complet de notre animation avec la lecture vidéo en boucle sur le panneau d'affichage.
