Créer un site web avec Dreamweaver CC

Ajouter de la vidéo

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Ajoutez des médias vidéo ou audio à l'aide de l'inspecteur de propriétés. Ajoutez une source et toutes ses propriétés indispensables, puis liez la page par un lien.
06:52

Transcription

Après avoir préparé trois fichiers de vidéo au format MP4, OGV ou WEBM, regardons auprès de Dreamweaver comment maintenant on va pouvoir intégrer un média audio-visuel. Alors pareil, on va passer sur une page index de base ici et au niveau maintenant de notre contenu, ici, on va placer le curseur. On va faire quelques Retour chariot. On sait que les espaces ne mangent pas de pain dans la partie HTML, et donc on va pouvoir venir faire une insertion directement de vidéo HTML 5. Alors soit on va passer directement par une partie HTML 5 vidéo ici depuis depuis la barre de menu, soit on peut venir dans l'onglet HTML5 ici et on va venir chercher la partie vidéo en prenant soin d'opter pour la partie HTML5 vidéo et non pas la partie flash vidéo. En cliquant sur l'élément vidéo, ça ne nous place simplement qu'un curseur vidéo ici tout simplement. Ce n'est pas gênant, parce que maintenant la suite, va pouvoir se passer, non pas dans le code, mais dans la partie de l'inspecteur de propriété. Donc qu'on soit dans un élément visuel ici, ou dans un inspecteur de propriété ici, on va pouvoir venir faire tout notre petit business avec la vidéo. On va ouvrir directement un élément source on va venir dans les images, et on va chercher la vidéo MP4 par exemple. Dès que je valide MP4 ici, automatiquement les sources alternatives seconde et troisième vont se remplir ici directement et ici on va pouvoir faire le MP4, le WEBM et le OGV. On pourrait les placer dans l'ordre que l'on souhaite, parce qu'en fait, comme vous le savez, quand une balise HTML5 vidéo est rencontrée, le navigateur va piocher la première source. S'il trouve la première source à son goût et qu'il est capable de la jouer, il la jouera. Sinon, il passe à la seconde, et ainsi de suite, jusqu'à trouver, éventuellement un texte alternatif ici qui pourrait être Votre navigateur ne prend pas en charge ce format. Je vous invite à faire quelque chose d'un peu plus visuel, un peu plus esthétique, mais vous voyez le principe, c'est très simple. Si je viens dans la partie de l'élément vidéo ici c'est bien entendu le texte de rechange qui est pris en compte. Ici, vous l'aurez compris, on peut tout faire depuis l'inspecteur de propriété. Alors, cette première image, ici, ne me convient pas. C'est une image de la vidéo, certes, mais elle ne me convient pas. On va pouvoir utiliser le poster. Et ici, le poster, je vais pointer vers une image, directement, donc, de, on va dire, Franck Holmes par exemple, donc on va venir chercher l'image qui correspond au name de Franck Holmes donc, name Frank, OK et tous les formats sont acceptés, gif, jpeg, y compris psd, puisqu'on pourrait directement adapter le format d'image à partir du psd. Ici, le poster est en place. On va pouvoir retirer les parties largeur et hauteur ici, parce que on pourrait venir dans la partie style css, de manière à ce que l'élément vidéo fasse 100% de la page. Donc on va venir dans la partie éditable du code pour ajouter une balise style, ou on peut venir dans le css designer dire je veux ajouter sur la page, un sélecteur de manière globale, un sélecteur qui va être un conteneur vidéo, ça me va très bien, et ce conteneur vidéo, ici, je veux qu'il ait une largeur de 100% de largeur et comme j'ai retiré les propriétés de la balise vidéo, eh bien, vous avez automatiquement la mise en page respectée. Si je reprend ma balise vidéo, ici, je peux demander d'avoir des contrôles c'est cette petite barre qui est propre au navigateur donc j'en aurai aucun contrôle dessus. Est-ce que ma vidéo doit être en loop ? Est-ce qu'elle est muted ? Oui. Il est préférable de la mettre en muted pour être sûr que l'utilisateur règle le volume et que le volume ne soit pas à fond dès le départ. Autoplay ? Non parce que ça peut prendre en otage l'utilisateur, et au niveau du preload, il peut être intéressant uniquement de pré-loader les metadata dans toutes les données qui seront propres à la vidéo et la vidéo elle-même ne sera chargée que lorsque l'utilisateur appuie sur Play. Tant que l'utilisateur n'appuie pas sur Play, la vidéo ne sera pas chargée. Si des fois vous avez besoin d'une alternative flash, bien entendu, vous pourriez pointer ici vers un HWF qui serait en fait le document natif. Mais à l'époque du HTML5, il vaut mieux plutôt dire votre navigateur ne prend pas en charge ce format, et orienter soit vers un téléchargement de la vidéo, soit vers une page qui explique comment mettre en place un plug-in video ou vers le téléchargement d'un navigateur contemporain. Voilà, donc notre page est terminée au niveau de la vidéo on va pouvoir faire un Enregistrer maintenant directement, et comme il s'agit d'une page modèle, on va pouvoir l'appeler « indexvideo.html ». On enregistre ce document, et là, on va pouvoir maintenant lancer en lecture notre vidéo, et vous voyez tout se passe de manière nature. Qu'est-ce qui me manque ? Il me manque simplement un lien maintenant qui puisse pointer de la page indexreel vers la page indexvideo. Donc je vais faire Fichier Ouvrir les fichiers récents je vais chercher « indexreel ». Dans « indexreel » on va chercher la page de Franck Holbes ici. La page de Franck Holbes, on va prendre son lien. Et depuis son lien j'ai plusieurs manières de procéder, soit je pointe avec le Pickwick ici qui va me permettre de pointer directement vers la page indexvideo soit on peut directement à partir de la source de lien, pointer vers l'élément adhoc de la page. Donc je vais récupérer cette partie-là, et je peux venir parcourir venir pointer vers la page indexvideo directement. Si j'enregistre ce document, ici on va dire que tout se passe normalement. Je visualise ma page et quand je clique sur cet élément, il ne se passe rien. Il faut que j'appuie sur Ctrl+clic pour pouvoir suivre l'élément. Pourquoi Ctrl+clic ? Tout simplement parce qu'ici, au niveau du menu d'affichage, j'ai les options d'affichage en direct, pour pouvoir suivre le lien, c'est Ctrl+clic sur le lien soit je déclique là-dessus. Mais chaque fois que je vais cliquer sur un lien sans appuyer sur Ctrl, je suivrai le lien. Le mieux c'est de garder le Ctrl, qui fait que là on est passé sur la page vidéo, et on peut lire notre vidéo maintenant, en toute tranquillité. C'est très simple d'intégrer des médias, surtout pour un site de Festival. Si je veux intégrer de l'audio maintenant, il suffit que j'utilise HTML5 audio, que j'utilise des formats de type MP3, M4V, etcetera qui seront lus exactement de la même manière que ce que l'on a vu pour la vidéo.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !