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.

L'essentiel de Dreamweaver CC 2017

Exploiter d'autres médias

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Qu'il s'agisse de son ou de vidéo, les paramètres HTML sont identiques. L'inspecteur de propriétés et l'ensemble des attributs disponibles vous faciliteront l'intégration de ces médias.
07:06

Transcription

D'autres types de media que les images peuvent être intégrées dans nos pages html, et on va dire que les principaux seront l'audio et la vidéo. Alors pour cela, pareil. Depuis la barre d'insertion html, ici, on va pouvoir,simplement insérer l'audio. Alors l'audio va insérer toute une série de contrôles, et tout les paramètres sont gérables depuis Dreamweaver. Alors c'est vrai qu'il est assez rare, à moins que ce soit un site dédié à la musique, d'utiliser de l'audio, mais par contre la vidéo peut être beaucoup plus fréquement utilisée. Dans la mesure où la vidéo s'utilise exactement comme l'audio, je vous propose qu'on regarde plutôt au travers de la vidéo comment utiliser des types de médias avec dreamweaver. Alors ici, on l'a intégré, vous voyez qu'on se retrouve exactement avec le même modèle, c'est-à-dire vidéo contrôle, ça veut dire qu'il va y avoir la barre de contrôle, si vous enlevez cet attribut ou que vous décochez la case ici, le petit visuel de la barre de contrôle va disparaître. Alors attention, ce visuel n'a aucun rapport avec ni Dreamweaver, ni la page html, ni rien, il aura un rapport avec le navigateur qui va consulter cette vidéo. Vous allez avoir tous les paramètres qui parlent d'aux-mêmes, le premier ça va être est-ce que la vidéo se joue en boucle? Est-ce que la vidéo se joue dès le départ? Qu'elle se joue en boucle c'est une chose, dès le départ, évitez, parce que ça peut prendre en otage l'utilisateur. Est-ce que vous coupez le son? Oui. Alors là, cette vidéo n'a pas d'audio, donc on va directement la mettre en muted. Mais si vous avez de l'audio, ce serait exactement le même fonctionnement, et je vous conseille de mettre en muted, de façon à ce que ça n'envahisse pas l'espace sonore, que la personne puisse le contrôler d'elle-même. Ici, est-ce qu'il va y avoir un préchargement ou pas? Non, il ne va y avoir aucun préchargement. Donc, dès que la personne va appuyer sur play, la vidéo va commencer à se charger. Auto, l'intérêt va être que automatiquement, la vidéo se précharge. Vous savez que la personne est venue là, parce que c'est la bande annonce d'un film, la bande annonce de quelque chose, et vous savez que la personne va regarder, donc, vous lui dîtes : << Ne perds pas de temps, télécharge automatiquement la vidéo. Dans d'autres cas, téléchargez uniquement les meta datas, c'est-à-dire que on va demander en gros, au navigateur de charger toutes les informations de meta données concernant la vidéo, mais de pas charger la vidéo. La vidéo ne sera chargée que lorsque l'on va appuyer sur play. Donc une meta data, c'est un juste et bon compromis. Alors maintenant, on a d'autres paramètres à rentrer, et notamment la vidéo. Alors sur la source, vous voyez que vous avez 3 parties de source. Vous avez une source ici, et deux sources alternatives 1 et 2. Dès l'instant où vous allez pointer vers une des sources, par exemple, je vais prendre du mp4, regardez, j'ai fait mp4, automatiquement, les sources alternatives se sont remplies, ici. Et je suis passé en webM et je suis passé en ogv automatiquement à ce niveau là. Donc ça, c'est assez intéressant parce que ça permet, en une seule integration, de pouvoir récupérer plusieurs formats. Alors s'il est vrai que, aujourd'hui, tous les navigateurs vont être capables de pouvoir lire le mp4, par exemple, il est vrai que des vieux navigateurs, ne sont pas forcément, au fait de ce genre d'activités, et il est bon de pouvoir passer plusieurs formats dans les balises sources. C'est pas nous qui l'avons fait, c'est Dreamweaver qui l'a intégré dès lors que j'ai pointé le mp4. Mais vous voyez ici, les types mim? sont automatiquement remplis, et le navigateur quiva arriver, va commencer à essayer de lire cette source, s'il n'y arrive pas, il va passer à la seconde, s'il n'y arrive pas, il va passer à la troisième. Par contre, dès qu'il va arriver à en lire une, il va lire celle-là. Alors pensez toujours à mettre celle qui est la qualité optimale dans la partie haute qui vous intéresse et de les mettre dans cet ordre là. Si vous resélectionnez la partie vidéo, maintenant, on va continuer à explorer les paramètres. Le texte alternatif, donc, ici, on va pouvoir entrer, vidéo du concert, donner des informations très précises à ce niveau là, et vous voyez que le texte alternatif, c'est le texte qui d'une part, sera lu par le lecteur d'écran ou tous les moteurs d'indexation, mais en plus c'est ce qui sera affiché si aucun navigateur n'est capable de pouvoir jouer ni la balise vidéo, ni les balises sources. Donc automatiquement le texte sera affiché. Sinon le texte, c'est vraiment un alternatif qui ne sera pas lu si le navigateur est capable d'interpréter une vidéo. Enfin, un autre élément intéressant, c'est le poster. Le poster, c'est cette première image, qui peut être une image avec des artefacts, elle peut être une image noire, elle peut être une image qui n'est pas forcément sollicitée au départ, donc vous allez pouvoir la remplacer par une image de type bitmap, jpeg, png, gif, celle que vous souhaitez et qui va, lorsque vous dîtes < remplacer cette image là, au moment de l'affichage d'un identificateur? tant que l'utilisateur n'aura pas appuyer sur play. Enfin, un dernier élément, c'est de pouvoir donner, si on le souhaite, une feuille de style, ici. Alors on a pas placé de style, c'est volontaire, on va juste placer, en imbriqué, en intégré un style pour la balise vidéo, en demandant par exemple, d'afficher un widz de 40%. Alors faîtes bien attention, la video, encore une fois, comme l'image va être une vidéo qui va être chargée de manière globale, c'est-à-dire que si on se retrouve avec une vidéo qui est affichée à 640, 480, là en l'occurence, c'est 640, 360, vous voyez, la vidéo gobale sera chargée. Donc, pensez plutôt à travailler sur une vidéo qui fera la dimension de l'exploitation que vous allez avoir. Donc si maintenant, j'enregistre ma page ici, fichier, enregistrer, et que je la lis dans un navigateur, donc on va pouvoir envoyer par exemple, dans chrome, ici. Voilà, la vidéo est mise enplace. Elle fait 40% de la dimension de la fenêtre, elle est responsive à ce niveau là, et dès l'instant où on va lancer en lecture, la vidéo va se lancer, va se jouer, va se lire, dans le navigateur. Quand vous survolez, vous avez votre barre, vous pourriez avoir le volume si vous aviez de l'audio. Il n'y a pas d'audio, ne la cherchez pas. Et si vous passez en plein écran, par contre voilà, ici, on est placé en plein écran, on a une qualité de vidéo qui le permet. Donc pensez quand même à garder cette qualité de vidéo , dans la mesure où vous souhaiteriez que la personne puisse passer en plein écran. Donc nous n'avons pas explorer l'audio, mais cela serait exactement pareil. juste une dernière petite précision, c'est que certains serveurs, surtout des serveurs mutualisés ne vont pas forcément avoir d'informations en ce qui concerne le type mim de ces vidéos là. Donc, ce que je vous propose, c'est de créer un nouveau type de fichiers ici, de type htaccess, .htaccess. Bien sur, il faut être sur un serveur apache puisque htaccess permet de dialoguer avec des serveurs apache. Et donc ici, vous allez copier, adtype, le type mim adobe de la vidéo, dans vidéo gg, qui correspondra au format de fichier .ogv. mp4, c'est du mp4, donc .m4v Et wbem c'est du.wbm Et puis vous pouvez rajouter une autre ligne pour prendre en compte les formats de fichiers audio, par là même, ici, en ajoutant le type mpeg, mp4, aac,ogg, et wave et wbm. Alors wave c'est du format brut de décoffrage, mais pourquoi ne pas livrer du wave, des fois, voilà. Et donc d'être sûr que votre serveur pourra bien interprété le type mim, dans le cas ou ça ne serait pas paramétrer pour pouvoir livrer les vidéos,au bon format, au poste client, qui en a fait la demande.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 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 !