Ce qu'il faut savoir
- Avec la page Home dans la vue Plan, accédez à Window >Library > [MR] Fullscreen Background Video dossier et faites glisser le widget sur la page.
- Pour ajouter une vidéo, accédez à Fichier > Ajouter des fichiers à télécharger > dossier de vidéos > Ouvrir.
Adobe Muse vous permet de créer des pages Web en utilisant un flux de travail similaire aux publications; vous n'avez pas besoin d'une compréhension approfondie du code qui construit un site ou une page, bien que la familiarité avec HTML5, CSS et JavaScript ne fasse pas de mal. Bien que la vidéo Web traditionnelle soit généralement ajoutée via l'API vidéo HTML5, Adobe Muse accomplit la même chose via des widgets qui créent le HTML 5 requis pour des tâches spécifiques, mais utilisent une interface en langage clair dans Muse pour écrire le code lorsque la page est publiée.
Comment préparer une page pour une vidéo d'arrière-plan dans Adobe Muse CC
Avec le widget installé, vous pouvez maintenant créer la page qui utilisera la vidéo.
- Avant de commencer, créez un dossier pour votre site Muse. Dans ce dossier, créez un autre dossier - nous utilisons " media " - et déplacez vos versions mp4 et webm de la vidéo dans ce dossier.
- Lorsque vous lancez Muse, sélectionnez File > New Site.
- Lorsque la boîte de dialogue Mise en page s'ouvre, sélectionnez Desktop comme Mise en page initiale et modifiez la Largeur de pageet Hauteur de page à 1200 et 900 . Cliquez sur OK.
-
Double-cliquez Page maître dans la vue Plan pour ouvrir la page maître. Lorsque la page maître s'ouvre, déplacez les guides d'en-tête et de pied de page vers le haut et le bas de la page. Vous n'avez vraiment pas besoin d'en-tête et de pied de page pour cet exemple.
Comment utiliser le widget vidéo d'arrière-plan plein écran dans Adobe Muse CC
Utiliser le widget est extrêmement simple.
- La première chose que vous devez faire est de revenir à la vue en plan en sélectionnant View > Plan Mode.
- Lorsque la vue en plan s'ouvre, double-cliquez sur la page d'accueil pour l'ouvrir.
- Ouvrez le panneau Bibliothèque – s'il n'est pas ouvert sur le côté droit de l'interface, sélectionnez Window > Library – et faites tourner le dossier [MR] Fullscreen Background Video.
- Faites glisser le widget de dossier sur la page.
-
Vous remarquerez que les Options vous demandent de saisir les noms des versions mp4 et webm des vidéos. Entrez 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 vous tromper est de copier le nom de la vidéo mp4 et de le coller dans les zones MP4 et WEBM du Menu Options
Une autre astuce: tout ce que fait ce widget est d'é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 de la page Web sur la table de montage, et cela fonctionnera toujours. De cette façon, cela 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 lira les vidéos, Muse ne sait toujours pas où se trouvent ces vidéos.
- Pour résoudre ce problème, sélectionnez Fichier > Ajouter des fichiers à télécharger.
- Lorsque la boîte de dialogue de téléchargement s'ouvre, accédez au dossier contenant vos vidéos, sélectionnez-les et cliquez sur Ouvrir.
-
Pour vous assurer qu'elles ont bien été mises en ligne, ouvrez le panneau Assets,et vous devriez voir vos deux vidéos. Laissez-les simplement dans le panneau. Ils n'ont pas besoin d'être placés sur la page.
- Pour tester le projet, sélectionnez File > Preview Page In Browser ou, comme il s'agit d'une seule page, Fichier > Aperçu du site dans le navigateur. Votre navigateur par défaut s'ouvrira et la vidéo sera lue.
- À ce stade, vous pouvez traiter le fichier Muse comme une page Web normale et ajouter du contenu à la page d'accueil, et la vidéo sera lue en dessous.
Comment ajouter un cadre d'affiche vidéo dans Adobe Muse CC
Il s'agit 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 gérer ce peu de méchanceté.
Il s'agit d'une "meilleure pratique" pour inclure une image 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 Browser Fill en haut de la page.
- Cliquez sur le lien Image et accédez à l'image à utiliser.
- Dans la zone Fitting, sélectionnez Scale to Fill et cliquez sur le Center point dans la zone Position. Cela garantira que l'image sera toujours mise à l'échelle à partir du centre de l'image lorsque la taille de la fenêtre d'affichage du navigateur change. Vous verrez également l'image remplir la page.
- Une autre petite astuce consiste à utiliser une couleur de remplissage unie au cas où le cadre de l'affiche mettrait un certain temps à apparaître. Pour ce faire, cliquez sur la puce Color pour ouvrir le sélecteur de couleurs Muse. Sélectionnez l'outil eyedropper 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 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 fait glisser une vidéo dans l'arrière-plan d'une page Web.
