Contenu
Ajout de la vidéo à Adobe Muse
L’aspect vraiment intéressant d’Adobe Muse est qu’il permet de créer des pages web en utilisant un flux de travail similaire à celui utilisé pour la mise en page des publications. Vous n’avez pas besoin de connaître le code qui permet de construire un site ou une page, mais une bonne connaissance de HTML5, CSS et JavaScript ne vous fera pas de mal.
Bien que la vidéo web traditionnelle soit généralement ajoutée grâce à l’utilisation de l’API vidéo HTML5, Adobe Muse accomplit la même chose grâce à ce qu’il appelle des « widgets ». Les widgets créent le HTML 5 requis pour des tâches spécifiques mais utilisent une interface en langage simple dans Muse pour écrire le code lorsque la page est publiée.
Dans cet exercice, nous allons utiliser un widget que vous pouvez télécharger, gratuitement, sur Muse Resources. Lorsque le widget sera téléchargé, il vous suffira d’ouvrir le fichier .zip et de double-cliquer sur le fichier .mulib dans le dossier Full-Screen Video. Cela l’installera dans votre copie d’Adobe Muse.
Comment préparer une page pour une vidéo de fond dans Adobe Muse CC
Le widget étant installé, vous pouvez maintenant créer la page qui utilisera la vidéo.
Avant de commencer, créez un dossier pour votre site Muse. A l’intérieur de ce dossier, créez un autre dossier – nous utilisons le terme « media » – et déplacez vos versions mp4 et webm de la vidéo dans ce dossier.
Lorsque vous lancez Muse, sélectionnez Fichier>Nouveau site. Lorsque la boîte de dialogue de mise en page s’ouvre, sélectionnez Bureau comme le Mise en page initiale et de modifier la Largeur de la page et Hauteur de la page valeurs à 1200 et 900. Cliquez sur OK.
Double-cliquez sur la page principale dans la vue en plan pour ouvrir la page principale. Lorsque la page principale s’ouvre, déplacez les guides de l’en-tête et du pied de page vers le haut et le bas de la page. Vous n’avez pas vraiment besoin d’un en-tête et d’un pied de page pour cet exemple.
Comment utiliser le widget vidéo plein écran en arrière-plan dans Adobe Muse CC
L’utilisation du widget est très simple. La première chose à faire est de revenir à la vue en plan en sélectionnant Affichage>Mode Plan. Lorsque la vue en plan s’ouvre, double-cliquez sur l’icône Page d’accueil pour l’ouvrir.
Ouvrez le panneau de la bibliothèque – s’il n’est pas ouvert sur le côté droit de l’interface, sélectionnez Fenêtre>Bibliothèque – et tournent sur le [MR] Vidéo de fond plein écran dossier. Faites glisser le widget vers le dossier sur la page.
Vous remarquerez la Options vous demande d’entrer les noms des versions mp4 et webm des vidéos. Saisissez les noms exactement comme ils sont orthographiés dans le dossier où vous les avez placés. Une petite astuce pour vous assurer de ne pas faire d’erreur consiste à copier le nom de la vidéo mp4 et à le coller dans le MP4 et WEBM domaines de la Menu des options.
Une autre astuce : Ce widget ne fait qu’écrire le code HTML 5 pour vous. Vous pouvez le dire parce que vous voyez <> dans le widget. Dans ce cas, vous pouvez placer le widget hors de la page web sur le presse-papiers et il fonctionnera toujours. De cette façon, il n’interfère pas avec le contenu que vous placerez sur la page.
Comment ajouter une vidéo et tester une page dans Adobe Muse CC
Bien que vous ayez ajouté le code qui permettra de lire les vidéos, Muse n’a toujours pas la moindre idée de l’endroit où se trouvent ces vidéos. Pour remédier à ce problème, sélectionnez Fichier> Ajouter des fichiers à télécharger. Lorsque le Boîte de dialogue de téléchargement s’ouvre, naviguez jusqu’au dossier contenant vos vidéos, sélectionnez-les et cliquez Ouvrez. Pour vous assurer qu’ils ont été téléchargés, ouvrez le Panneau des actifs et vous devriez voir vos deux vidéos. Laissez-les simplement dans le panneau. Elles n’ont pas besoin d’être placées sur la page.
Pour tester le projet, sélectionnez Fichier>Page de prévisualisation dans le navigateur ou, parce qu’il s’agit d’une seule page, Fichier>Prévisualisation du site dans le navigateur. Votre navigateur par défaut s’ouvrira et la vidéo – dans mon cas, une pluie tropicale – commencera à être diffusée.
À ce stade, vous pouvez traiter le fichier Muse comme une page web ordinaire et ajouter du contenu à la page d’accueil ; la vidéo sera alors diffusée en dessous.
Comment ajouter un cadre d’affiche vidéo dans Adobe Muse CC
C’est du web dont nous parlons ici et, selon la vitesse de connexion, il y a de fortes chances que votre utilisateur ouvre la page et regarde un écran vide pendant le chargement de la vidéo. Ce n’est pas une bonne chose. Voici comment faire face à ce genre de méchanceté.
La « meilleure pratique » consiste à inclure un cadre d’affiche de la vidéo, qui apparaîtra pendant le chargement de la vidéo. Il s’agit généralement d’une capture d’écran en taille réelle d’une image de la vidéo.
Pour ajouter le cadre de l’affiche, cliquez une fois sur Remplissage du navigateur en haut de la page. Cliquez sur le bouton Lien vers l’image et naviguez jusqu’à l’image à utiliser. Dans le Adaptation zone, sélectionnez Échelle à remplir et cliquez sur le bouton Point central dans la Position de la région. Ainsi, l’image sera toujours à l’échelle du centre de l’image lorsque la taille de la fenêtre de visualisation du navigateur change. Vous verrez également l’image remplir la page.
Une autre petite astuce consiste à avoir au moins une couleur de remplissage solide – et non blanche – au cas où le cadre de l’affiche mettrait du temps à apparaître. Pour ce faire, cliquez sur la puce de couleur pour ouvrir le sélecteur de couleur Muse. Sélectionnez l’outil pipette et cliquez sur une couleur prédominante dans l’image. Lorsque vous avez terminé, cliquez sur la page pour fermer la boîte de dialogue de remplissage du navigateur.
À ce stade, vous pouvez enregistrer le projet ou le publier.
La dernière partie de cette série vous montre comment écrire le code HTML5 qui permet de glisser une vidéo dans le fond d’une page web.
