Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Dreamweaver CS6 : Les nouveautés

Utilisation de la balise <video>

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La version CS5 apportait une forte orientation vers la direction de HTML5. Cependant, la balise
07:54

Transcription

Dreamweaver a intégré la gestion des balises HTML5 vidéo depuis sa version CS5 mais il est vrai que, jusqu'à présent, il fallait toujours passer par la partie code pour pouvoir gérer l'intégralité des attributs et le paramétrage de l'utilisation des vidéos. Aujourd'hui, la mise à jour vers 12.1 va permettre de pouvoir intégrer de manière visuelle et par l'inspecteur de propriétés, la balise HTML5 vidéo. Ça accroît grandement le flux de travail, simplifie toutes ces opérations. je vous propose de, directement, le mettre en application dans cette page. Nous avons une page sur laquelle nous souhaitons placer de la vidéo. Je vais me placer, comme à l'accoutumée, juste avant la balise h1. Pour cela, le plus simple est de sélectionner la balise et puis, avec la flèche du clavier, se placer à l'extérieur de cette balise h1. On voit bien qu'en sélectionnant la balise et puis avec la flèche gauche du clavier, on se place à l'extérieur. On va depuis le menu Media... On a plusieurs possibilités d'accès : depuis le menu Media, on va pouvoir utiliser une vidéo HTML5 et on pourrait également, depuis l'onglet Commun, avoir ce choix, cette possibilité-là. On pourrait également utiliser le menu Insertion Média Vidéo HTML5 ou depuis Insertion Vidéo HTML5. A chaque fois, vous remarquerez qu'il y a la possibilité d'utiliser un raccourci clavier qui permet d'obtenir exactement le même résultat. Que l'on fasse l'insertion depuis le panneau, le menu ou le raccourci clavier, le résultat est identique. Dreamweaver insère pour nous une balise vidéo avec simplement le contrôle par défaut et un petit garde-place, ici, de couleur grise, qui va indiquer l'emplacement de cette vidéo. Pour l'instant, rien n'a été sélectionné, rien n'a été paramétré si ce n'est la possibilité d'avoir les contrôles qui vont être mis en place. Pour intégrer la vidéo, rien de plus simple, il suffit maintenant, pour la source de cette vidéo, de cliquer sur le dossier, ici et de venir pointer vers une vidéo. En HTML5, il faut utiliser trois formats vidéo pour les trois types de lecture moteur de rendu en fonction des navigateurs qu'on va utiliser : mp4, ogv ou webm. On va prendre par défaut la partie mp4 je vais pointer vers cette vidéo et je vais valider par Ok. Si on regarde, ici, dans la partie Source, on s'aperçoit que Dreamweaver a automatiquement rempli pour moi, non seulement la vidéo mp4 sur laquelle j'avais pointé mais également le type mime nécessaire : video/mp4 et a fait de même puisqu'il a détecté que, sur le même dossier, les fichiers ogv et webm étaient fournis, il les a également intégrés en spécifiant à chaque fois, les types mimes adéquats. Si on regarde bien ici dans l'inspecteur de propriétés, les informations ont également été renseignées avec ici, la partie mp4, webm et ogv en sources alternatives. Cependant, si vous faites une modification uniquement sur le dossier de ce fichier mp4, les deux autres ne seront pas modifiés. Si vous souhaitez modifier la vidéo et prendre en compte les solutions alternatives, il faudra alors supprimer l'intégralité des valeurs de ces champs et à ce moment-là, faire l'ajout. Si les champs sont vides, l'ajout du mp4 va permettre automatiquement de remplir les deux autres sources alternatives, sinon vous pouvez, de manière indépendante, aller modifier une source ou l'autre. C'est bien, ça a intégré la vidéo mais Dreamweaver n'a pas été lire les informations de dimension de cette vidéo et donc, si je resélectionne cet élément vidéo, on voit bien que les dimensions ne sont pas données et la valeur par défaut a été préservée. Généralement, une vidéo ne débute pas forcément sur une image pleine et puis des fois l'image pleine n'est pas forcément parlante, elle peut être sur un cadre noir ou une photo qui ne correspond pas tout à fait à la communication que l'on souhaiterait mettre en place donc, pour cela, on va avoir recours à ce que l'on appelle un poster. Ici, on a la possibilité d'intégrer ce poster qui va être une image de type bitmap, qui aura été préparée à l'avance et qui sera, soit la capture de la première image du film, soit une image-titre qui va venir occuper cet espace. Généralement, cette image est à la dimension de la vidéo. Dès qu'on va l'intégrer, Dreamweaver va venir automatiquement caler les largeurs et les hauteurs de ce poster sur la taille de la vidéo et donc, on voit bien qu'ici, on a video width et video height qui ont été positionnés sur la taille du poster. Cela fait, pour l'instant, deux attributs que Dreamweaver place pour nous sur la balise vidéo, poster et controls. Venons regarder les autres attributs auxquels on a accès : Control qui va permettre d'ajouter ou non la barre de commande de cette vidéo, Loop qui va permettre à la vidéo de se jouer continuellement, une fois terminée elle recommence, AutoPlay, à user avec modération, car si vous ouvrez plusieurs onglets d'un site, en simultané, et que la vidéo est en autoplay, dès que la vidéo sera chargée, elle va se jouer, ce qui peut être ennuyeux. Faites attention à l'utiliser de manière très contrôlée et surtout dans des contextes un peu particuliers. La partie Muted permettra de jouer la vidéo avec le son coupé, pour peut-être des fois, des utilisations dans des environnements de bureau, par exemple, ça peut être ennuyeux, si les personnes ne sont pas équipées de casque, d'avoir des lectures sonores très fortes dès le départ. L'outil de pré-chargement va permettre de prendre en compte le pré-chargement de la vidéo ou pas. Il y a une petite particularité : par défaut, il est calé sur non. Si on regarde bien ici, on n'a rien qui a été défini sur le preloading et donc, les navigateurs vont, par défaut, commencer le pré-chargement de cette vidéo. Si on souhaite contrôler le pré-chargement il faut passer sur n'importe quelle valeur, puis revenir sur None et là vous voyez que vous avez preload=none, qui s'est mis de manière explicite et donc, il ne prendra pas en compte le chargement. On indique au navigateur de ne pas charger l'information. En mode automatique, on demanderait au navigateur de prendre en charge automatiquement le chargement de la vidéo, même si l'utilisateur ne clique pas sur le mot Lecture et si la vidéo ne se lit pas. La troisième possibilité va être métadatas qui va demander au navigateur de télécharger, de prendre en charge les informations, les métadonnées de la vidéo, c'est-à-dire les dimensions, la durée, etc... et, éventuellement, les premières images de cette vidéo qui pemettra une meilleure transition entre la non-lecture et la lecture. Nous allons en rester là pour l'utilisation de base de l'intégration de balises HTML5, au sein de notre page. Ici, on va sélectionner, on va aller appliquer une class, par exemple, de flottaison droite, qui correspondra à la mise en page de notre document. Je vais enregistrer maintenant cela et je vais passer en mode indirect. Vous voyez bien, ici, l'intégralité... On va repasser en mode direct et je me suis aperçu que le rendu ne passait pas, je vais re-essayer en mode indirect, le rendu ne passe pas, il doit s'agir d'un petit artefact d'affichage avec la capture. On va aller contrôler directement dans un navigateur, ici, Google Chrome et on voit bien que le poster est bien pris en compte et on peut lancer cette vidéo. Donc, une intégration grandement simplifiée, améliorée dans cette version intermédiaire la 12.1 de Dreamweaver CS6 qui nous permet d'utiliser, depuis le panneau d'insertion, depuis l'élément commun ou média ou depuis le menu d'insertion du HTML5 ou le raccourci clavier, une intégration de la balise vidéo de manière très transparente, très rapide et très simple.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 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 !