Il est vraiment très facile de manipuler des vidéos HTML5 dans Dreamweaver CC.
J'ai ouvert le document index.html disponible dans le dossier Chapter 8 des fichiers d'exercice.
Ouvrez-le, puis faites défiler vers le bas pour atteindre le centre du document.
Dans l'article de blog, cliquez pour afficher le curseur de texte.
À cet emplacement, nous allons insérer une vidéo HTML5.
Nous disposons pour cela de plusieurs options.
Dans le panneau Insertion, sous Médias, se trouve un bouton Vidéo HTML5.
Sachez que vous le retrouverez également dans la section Commun.
Le menu Insérer inclut aussi une option Vidéo HTML5.
À droite de celle-ci figure le raccourci clavier correspondant.
Quand vous cliquez sur l'option, un espace réservé pour la vidéo est inséré dans le document.
En mode Fractionner, vous voyez que j'ai simplement ajouté un élément vidéo avec l'attribut controls qui est automatiquement appliqué.
Si vous n'en voulez pas, vous pouvez désélectionner cette option dans l'inspecteur Propriétés.
Toutes les options relatives à la vidéo sont accessibles via l'inspecteur Propriétés.
Vous pouvez ainsi travailler de manière visuelle.
Pour attribuer un ID ou une classe à cet objet vidéo, utilisez ces deux options.
Mais avant, il faut définir l'attribut Source, qui est le plus important, car il spécifie l'emplacement du fichier vidéo.
Cliquez sur l'icône de dossier à droite du champ Source pour afficher la boîte de dialogue de sélection de la vidéo.
Le répertoire contient un dossier intitulé html5-video qui inclut trois formats vidéo différents.
Les trois sont nécessaires pour offrir une expérience homogène dans tous les navigateurs.
Ici, nous allons choisir bentley.mp4, mais notez qu'il y a aussi un fichier .ogv et un fichier .webm portant le même nom que le fichier MPEG-4.
Après l'avoir sélectionné, cliquez sur Ouvrir.
Ce faisant, le champ Source est renseigné, de même que les champs Source alt. 1 et Source alt. 2, car on a le même nom de fichier pour les différents formats.
Notez également que le code a été actualisé en conséquence.
En revanche, il manque la largeur et la hauteur.
Si vous ne les connaissez pas, vous allez devoir réfléchir pour savoir quoi saisir.
Il y a cependant des chances que vous ayez besoin d'une image postérisée, c'est-à-dire une image qui représente le contenu de la vidéo.
L'image postérisée doit être aux mêmes dimensions que la vidéo.
Il se trouve que j'en ai déjà créé une.
Cliquez sur l'icône de dossier à droite du champ Poster.
Le répertoire contient un fichier nommé poster.png.
Sélectionnez-le.
Ses dimensions sont de 426 x 240.
Cliquez sur Ouvrir.
La largeur et la hauteur sont maintenant renseignées avec ces valeurs.
Des options supplémentaires sont disponibles en bas à gauche.
Je vous ai déjà expliqué le rôle de l'option Commandes.
Si je coche Boucle, la vidéo sera lue en boucle, elle reprendra au début dès la fin de la lecture.
Vous pouvez opter pour Lecture auto, mais je vous le déconseille.
Les utilisateurs n'aiment pas quand les vidéos sont lues automatiquement sur une page web.
Si vous activez tout de même l'option, je vous conseille de cocher la case Mis en sourdine pour éviter d'entendre le son.
La vidéo sera lue, mais sera moins gênante, car il n'y aura pas de son.
Je laisse les deux cases décochées.
Dans le menu Préchargement, l'option par défaut est Aucun.
Pourtant, l'attribut n'est pas affecté à l'élément vidéo.
Pour l'affecter dans le code, choisissez une autre option, puis sélectionnez de nouveau Aucun.
Le cas échéant, aucun préchargement n'aura lieu, ce qui n'est pas optimal en termes d'expérience.
Je préconise de choisir au moins Métadonnées.
Ainsi, des informations comme la durée et les dimensions seront préchargées et l'utilisateur en saura davantage sur la vidéo.
Avec l'option Auto, le navigateur détermine s'il souhaite précharger du contenu.
Je sélectionne Métadonnées.
Voilà pour les attributs de base.
Nous examinerons les attributs Repli Flash plus tard, mais avant, je vais repasser en mode Création, puis cliquer sur En direct.
Ce faisant, l'élément vidéo doit s'afficher correctement dans Dreamweaver et vous devez pouvoir le prévisualiser.
Je clique sur le bouton de lecture.
Effectivement, ça fonctionne.
Je recommande de tester cette page dans Firefox, Chrome et Internet Explorer pour s'assurer que tout fonctionne comme prévu.
En conclusion, grâce aux nouvelles fonctionnalités de Dreamweaver CC, l'insertion de vidéos HTML5 est d'une facilité déconcertante.
