Edge Animate prend en charge les vidéos HTML5 natives, ce qui vous permet d’intégrer facilement vos clips vidéo préférés dans vos compositions. Vous pouvez contrôler la lecture des vidéos avec des actions de lecture de base ou JavaScript. Vous pouvez également lier des éléments vidéo à des événements tactiles ou de souris, afin de créer une expérience interactive exceptionnellement riche. 

Les fonctions de lecture vidéo sont intégrées au DOM HTML. Cela signifie que les vidéos peuvent être lues dans le navigateur de n’importe quel ordinateur ou périphérique, sans nécessiter de plug-in.

 

Vous pouvez importer des fichiers .mp4 et .ogv dans Edge Animate.

Pour une meilleure compatibilité entre les navigateurs, pensez à inclure les ressources .mp4 et .ogg des éléments vidéo à votre projet. Pour une description détaillée des types vidéo pris en charge, consultez la page Formats Media supportés par les éléments HTML audio et vidéo.

Ajout d’une vidéo à une composition

Effectuez l’une des opérations suivantes :

  • Cliquez sur Fichier > Importer ou faites glisser les fichiers vidéo directement sur l’étape, depuis le système de fichiers. Un « groupe vidéo » portant le nom du fichier vidéo est créé dans la Bibliothèque. Celui-ci contient le fichier vidéo ainsi que les fichiers de secours permettant d’assurer la compatibilité entre navigateurs.

Remarque : lorsque vous les importez dans la composition, les fichiers de secours sont automatiquement rassemblés par nom sous le groupe vidéo.

  • Cliquez sur Ajouter une vidéo dans la Bibliothèque de votre projet et recherchez le fichier vidéo. Faites ensuite glisser le groupe vidéo de la bibliothèque vers la scène. 
Option « Ajouter une vidéo » dans la bibliothèque
Option « Ajouter une vidéo » dans la bibliothèque

Une fois la vidéo ajoutée à votre composition, un « élément vidéo » apparaît dans le panneau Eléments. Lorsque que vous sélectionnez l’élément vidéo dans le panneau Eléments, les options permettant de commander la lecture de la vidéo s’affichent dans le panneau Propriétés.

Lecture et contrôle d’une vidéo

Vous pouvez lire et commander une vidéo à l’aide des options suivantes :

  • Panneau Propriétés
    • Lecture auto : permet de lancer automatiquement la lecture du fichier vidéo sur le scénario et les navigateurs de bureau.
    • Boucle : relance le fichier vidéo depuis le début quand sa lecture se termine.
Commandes vidéo du panneau Propriétés
Commandes vidéo du panneau Propriétés

  • Scénario
    • Lecture : permet de lire le fichier vidéo depuis la position actuelle de la tête de lecture.
    • Lire à partir de : permet de préciser la marque temporelle à partir de laquelle vous souhaitez lancer la lecture de la vidéo.
    • Pause : permet de mettre la vidéo en pause. Utilisez une fonction de lecture pour reprendre la lecture.
Options de lecture vidéo dans le scénario
Options de lecture vidéo dans le scénario

  • Actions vidéo : permet d’utiliser des fragments de code dans l’éditeur Actions pour contrôler la lecture de la vidéo par le biais d’événements.

Actions vidéo

  1. Ouvrez l’éditeur d’actions en cliquant sur {} en regard de l’étape sur la scène.

  2. Cliquez sur un déclencheur (événement).

  3. Dans la liste Choisir une action, cliquez sur Vidéo, puis sur l’action requise.

    Vous pouvez également rechercher une action à l’aide de la zone de recherche de la section Choisir une action.

    Actions vidéo dans l’éditeur d’actions
    Actions vidéo dans l’éditeur d’actions

  4. Dans la section Sélectionner une cible, cliquez sur Etape, puis double-cliquez sur l’élément ou le symbole que vous voulez affecter à l’action sélectionnée.

    Vous pouvez également rechercher l’élément ou le symbole à l’aide de la zone de recherche de la section Sélectionner une cible.

Préchargement d’une vidéo

Pour précharger des fichiers vidéo avant le chargement de la composition, sélectionnez « Précharger la vidéo » dans la section Préchargement du panneau Propriétés de la scène.

Remarque : sur la plupart des appareils mobiles, le préchargement de fichiers vidéo n’est pas disponible. Reportez-vous à la section Utilisation des fonctions vidéo sur un appareil pour connaître les restrictions applicables. 

Préchargement d’une vidéo
Préchargement d’une vidéo

Activation du lecteur vidéo par défaut

Vous pouvez utiliser le lecteur Media Player par défaut du navigateur pour afficher les commandes relatives à votre vidéo. Le lecteur vidéo par défaut est automatiquement masqué. Pour l’activer, sélectionnez l’élément vidéo et cliquez sur « Commandes » dans la section Vidéo du panneau Propriétés

Activation du lecteur vidéo par défaut dans le panneau Propriétés
Activation du lecteur vidéo par défaut dans le panneau Propriétés

L’habillage du lecteur est rendu par les navigateurs, il peut donc apparaître différemment selon le navigateur utilisé. Ainsi, le lecteur que vous voyez dans Chrome diffère de celui affiché dans Firefox.

Lorsque le lecteur est affiché sur la scène, vous pouvez y ajouter des propriétés d’animation et de transformation ou toutes autres propriétés, comme pour n’importe quel autre objet.

Utilisation des fonctions vidéo sur un appareil

iOS

Dans Safari sur iOS (pour tous les appareils, y compris l’iPad), où les utilisateurs peuvent être connectés à un réseau de téléphonie mobile et être facturés par unité de données, les fonctions de préchargement, de lecture automatique et de lecture sont désactivées. Aucune donnée n’est chargée tant que l’utilisateur ne lance pas la lecture de la vidéo.

Vous pouvez utiliser les actions vidéo pour appeler un élément vidéo déclenché par un événement utilisateur. Pour plus d’informations sur les actions vidéo, voir Actions vidéo.

Android

Les restrictions applicables aux vidéos sous Android sont généralement les mêmes que sous iOS.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne