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

Mettre en place une alternative à la balise <video>

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les navigateurs plus anciens et particulièrement les versions d'Internet Explorer antérieures à la version 9 n'interprètent pas la balise
09:20

Transcription

Lorsque l'on fait appel à une balise HTML5 pour jouer de la vidéo, il faut savoir que certains navigateurs, par exemple Internet Explorer antérieur à la version 9 ou des navigateurs plus anciens quel que soit l'éditeur, ne prenaient pas en compte la balise HTML5 et donc ne pourront pas lire le contenu. Par exemple, ici, dans Chrome, il est très simple de pouvoir lire le poster ainsi que la vidéo, sans souci. Par contre, dans une version antérieure d'Internet Explorer par exemple 7.8 on ne pourrait pas lire cette vidéo. En sélectionnant l'élément vidéo, on s'aperçoit dans l'inspecteur de propriétés qu'on a accès à ce qu'on appelle une animation de rechange, un fall back, qui va permettre de prendre le relai. Le texte de rechange, c'est bien, ça va permettre d'afficher le texte sur le navigateur qui ne prendra pas en charge la balise HTML5 vidéo mais ce n'est pas très sympa. Si on veut vraiment mettre une solution alternative de vidéo, il va falloir passer par une animation Flash SWF qui va lire un film en FLV. Il nous faut deux étapes, la première c'est fabriquer le FLV et ensuite voir quel lecteur on va mettre. La solution la plus rapide pour le lecteur, la plus simple, serait de placer son curseur, ici, à l'intérieur de la balise vidéo et donc les navigateurs qui ne liraient pas la balise vidéo pourraient lire ce que l'on va placer ici, à la fin et on pourrait passer une vidéo Flash directement en allant parcourir, en pointant vers ce format de fichier FLV, on pourrait lancer le player. Le petit bémol que l'on pourrait placer c'est que ces players vont s'activer moyennenant Javascript donc si on est sur de vieux navigateurs qui, en plus, ne prennent pas Javascript la vidéo ne sera quand même pas lue. Adobe préconise de fabriquer son propre player avec Flash et ne pas passer par cette solution alternative qui implique l'utilisation de Javascript. Les deux outils, le premier qui va nous permettre de fabriquer le FLV et le second qui va nous permettre de fabriquer le SWF sont fournis dans votre suite Create Cloud et il suffit pour cela de lancer Adobe media encoder qui va nous permettre de convertir une vidéo mp4 en FLV. L'utilisation est très simple, on va partir sur du mp4, ici et on pourrait lancer la conversion. Par défaut, Flash nous propose des solutions qui ne correspondent pas forcément à ce dont on a besoin. Alors soit on va choisir dans ce menu déroulant une possibilité qui conviendrait à ce que l'on souhaite mais il faut penser qu'on va viser de vieux navigateurs, on va partir dans quelque chose de plus spécifique, on va directement cliquer sur le réglage et non sélectionner la flèche de sélection. Ici, on a la possibilité de venir régler dans le format directement de choisir en FLV et non pas en F4V. Pour moi, il était par défaut en FLV mais il se peut que sur vos machines vous soyez en F4V par défaut, pensez à venir caler du FLV. Ensuite, au niveau codec vidéo, ici, on va descendre plus bas, on va utiliser un VBR. Quelle est la différence entre le CBR et le VBR ? Le CBR c'est du Constant Bit Rate alors que l'autre est un Variable Bit Rate. On aura une meilleure qualité d'encodage dès l'instant où on va utiliser du variable, surtout si la vidéo bouge beaucoup, s'il y a beaucoup de changements, de fluctuations dans l'image. Ensuite on va passer sur deux passes d'encodage qui donneront une qualité meilleure au final par rapport à une analyse moyenne basse et haute et ici on peut passer dans un niveau de débit faible qui suffira largement pour donner une bonne qualité. On va également pouvoir tomber le nombre d'images par seconde, on pourrait tomber à 15 images par seconde qui va considérablement diminuer le poids du FLV et qui ne gênera pas la lisibilité de l'image finale. On peut s'arrêter là au niveau de l'optimisation et voyez que, chaque fois, le poids du fichier estimé baisse, bien entendu. Sur la partie audio, au lieu de rester en stéréo on va passer en mono. Automatiquement on va demander à ce que le débit soit plus faible, on va le diviser par deux et puis, par défaut, on se trouve ici en 128, on va pouvoir basculer en 64 pour obtenir un meilleur rapport qualité/poids. Une fois tous ces paramètres, ici, signalés, on va pouvoir valider ok et maintenant on n'a plus qu'à lancer notre encodage, ici. C'est très rapide mais l'encodage va se faire deux fois parce qu'on avait demandé un double passe au niveau de l'encodage. Voilà, c'est terminé, on va pouvoir basculer maintenant dans Flash. On va demander de fabriquer un élément, un ActionScript2 qui suffit largement et surtout va rester compatible et cohérent avec une utilisation d'un navigateur plus ancien donc un Flash player qui serait plus ancien. On va s'assurer de dimensionner le document, la scène à une dimension qui corresponde à la taille de notre film, qui sera du 320 par 180, voilà, ok et, ici, on va pouvoir importer notre vidéo. Pour jouer la vidéo, le plus simple est de passer par ce qu'on appelle les composants, ici, les composants vidéo notamment. Il y a un FLVPlayBack qui va pouvoir faire le job et qu'il va falloir dimensionner. Soit on le dimensionne à la main, ici, soit on demandera à ce player de s'adapter à la taille du flux vidéo mais on va pouvoir le faire directement ici, et ici, 180, voilà. Donc notre player a été préparé pour pouvoir recevoir la vidéo. Justement, en parlant de vidéo, regardons le FLV qui a été fabriqué tout à l'heure depuis le mp4, il se trouve ici et c'est cet élément-là qu'on va venir encapsuler dans le player FLVPlayBack, ici. En le sélectionnant on a accès à toutes ses propriétés, bien entendu pas d'autoPlay, pas d'autoRewind, c'est ici qu'on aura pu lui demander de s'autosizer par rapport à la taille de la vidéo, ici, pour l'instant c'est très bien. On va demander le contentPath c'est-à-dire le chemin d'accès à la vidéo et on va pointer automatiquement vers l'élément FLV que l'on vient de fabriquer. Voilà, on peut valider, ok. L'intégralité des informations se met en place. On va pouvoir choisir la peau éventuellement, en sélectionnant ici, on pourrait choisir le type de barre de commande contrôle que l'on souhaiterait placer et éventuellement de faire un skinAutoHide qui va permettre de masquer cette peau ou de la faire apparaître en fonction de notre déplacement de souris. Voilà, tout est terminé, on va pouvoir enregistrer ce fichier. couper_oignon.fla on va appeler les paramètres de publication on n'a pas besoin d'enveloppe HTML on a simplement besoin d'exporter pour Flash, ici une version 9 du player suffira largement. On peut donc publier notre élément. Je vais dire ok et je vais enregistrer cet élément-là. On rebascule dans Dreamweaver, nous allons pouvoir intégrer cette vidéo. Si je me rapproche ici de l'outil vidéo, j'actualise et on s'aperçoit qu'on a deux SWF qui ont été générés, on va venir l'explorer. On a deux SWF générés, le premier qui correspond à la barre de contrôles et le second qui correspond à l'élément contenant le lecteur vidéo qui va pointer vers le FLV. C'est celui-ci qu'il va nous falloir utiliser et intégrer dans notre animation. Retournons dans Dreamweaver, sélectionnons l'objet vidéo et, ici, plutôt que d'insérer un Flash SWF ou une vidéo Flash, on va directement dans la réplication Flash, dans le FallBack, pouvoir appeler, dans le dossier video l'élément couper_oignon.swf Cela a ajouté une balise embed qui pointe vers ce SWF avec un type mime application shockwave flash. Si on regarde bien, ici, on a l'inspecteur de propriétés qui se met sur un lecteur Flash, ce qui est tout à fait normal, par contre Dream ne pourra le lire parce que le moteur de rendu ne comprend pas la balise embed, ici. Il faut penser que cela va être pris en compte uniquement par les vieux navigateurs. Les navigateurs contemporains prendraient directement cette balise-là. La seule chose qu'on va pouvoir faire c'est actualiser la largeur/hauteur pour demander à Dreamweaver d'aller calculer les largeurs/hauteurs et voyez ici les paramètres de width et height ont été placés directement parce qu'ils ont été reconnus sur le lecteur. Maintenant, on va pouvoir enregistrer cette page et venir la tester dans un navigateur plus ancien. Nous voilà dans Internet Explorer 8, déjà on s'aperçoit que les CSS ne sont pas pris en compte, volontairement, pour permettre de bien voir que le navigateur fonctionne de manière différente et donc ici on se retrouve avec un élément Flash qui est lu en alternative, par la balise embed. Voilà comment il est possible de pouvoir utiliser la balise HTML5 et fournir une solution alternative directement par l'inspecteur de propriétés afin de s'assurer que l'ensemble des navigateurs, modernes et anciens, pourront lire la vidéo que l'on propose dans nos contenus.

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 !