L'essentiel du HTML5

Utiliser les vidéos et ses formats

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La balise <video> s'emploie en encapsulant des balises <source>. Puis, les balises d'information suivent en renseignant l'utilisateur sur la non prise en compte de la vidéo ou des formats de fichiers.
05:07

Transcription

Utiliser de la vidéo en html fonctionne exactement pareil que ce qu'on a fait pour de l'audio ou pour picture. Donc, ici, on va commencer par placer une balise vidéo. Et sur cette balise video, on peut simplement placer une source qui va pointer vers un fichier mpeg4. Ajourd'hui, un grand nombre de navigateurs lisent le mpeg4. On peut simplement utiliser cette version là et puis placer une prise en compte dans le cas où le navigateur ne serait pas capable d'interpréter la balise video ou le format mpeg4. Une sorte d'alternative pouvant informer que soit ça ne fonctionne pas, soit un lien pour télécharger la vidéo. Alors, ça c'est très bien, mais on va voir qu'on peut être un poil plus verbeux, un poil plus explicite quand aux téléchargements. Alors pour la vidéo, les formats qui pourront être lus seront le webm, l'ogv ou le mpeg4. Et pour cela, je vous invite à vous rapprocher d'un convertisseur de type Miro, ici. Alors Miro, vous pouvez accéder depuis ce site, getmiro.com ou soit directement depuis le site de mirovideoencoder.com, soit vers les forums et la communauté de miro. Vous pouvez également télécharger miro pour toute plateforme. Cela fonctionne ici. Il a détecté que j'étais sous Windows pour Windows. Mais cela fonctionne également pour MacOSX ou Ubuntu Et vous pouvez télécharger les sources et les distributions si vous voulez le compléter ou l'uitliser de manière programmée. Voilà, donc, une fois dans la balise vidéo ici, Eh bien, on va pouvoir définir tout un certain nombre de sources qui vont pointer vers ces formats de fichiers. Alors, en amont, avant de rentrer dans les sources, ce qui peut être intéressant aussi, c'est de placer tous les attributs nécessaires classiques. Comme par exemple ici, le fait de précharger ou pas la vidéo. Personnellement, je préfère choisir non parmi non, auto, metadata. Metadata peut être intéressant si vous avez des scripts qui vont récupérer certaines données comme la durée de la vidéo, le titre, s'il y a présence ou non de sous-titres, etc... Sinon vous mettez non et ça va laisser le libre choix à l'utilisateur de cliquer sur play pour pouvoir lancer la vidéo. Alors, faites attention si vous mettez non, pensez quand même à passer un contrôle pour laisser le chargement. pensez à couper le son au départ pour être sûr de ne pas envahir l'espace sonore de l'utilisateur. Et si là, je mets le vidéo autoplay, la propriété, pour dire attention lis toi automatiquement, Mais ne mettez pas autoplay puisque vous n'avez pas mis de préchargement au départ. Donc, faites bien attention à cet antagonisme qu'il peut y avoir ici. Placez un loop ou pas. Donc si la présence de l'attribut est là le film se mettra en boucle. Si l'attribut n'est pas là, le film ne se mettra pas en boucle, bien entendu. Alors, quelque chose qui peut être placé de manière alternative, on va dire, c'est l'ordre des sources dans lesquelles on va présenter. C'est à dire que si le navigateur compren le mpeg4, il va lire le mepg4. Il ne va pas chercher à aller plus loin. Et s'il ne comprend pas le mpeg4, il va lire la seconde ligne. Et là, il va essayer de lire le webm. S'il n'y arrive pas, en dernier recours, on placera l'ogv. Donc mettez les films dans l'ordre de la qualité que vous souhaitez présenter à vos utilisateurs de façon à ce que le navigateur, en parcourant ce fichier, puisse ou non lire le fichier dans une qualité meilleure, quand même. Important de définir le type vidéo, à chaque fois. Donc, ici, le type, c'est vidéo mpeg4. Vous pouvez éventuellement préciser le codec audio qui aura été utilisé. Alors, si vous venez sur le site html 5 video - tag and attributes, vous avez les principaux formats de fichiers qui sont indiqués ici. En disant généralement, en H 264, la vidéo est en mpeg4 mais le codec risque d'être ce type de codec là. Et donc, ça va vous permettre de pouvoir adapter le codec audio utilisé si vous voulez avez cette précision de renseignement. Maintenant vous avez un logiciel comme mediainfo, qui va vous permettre de pouvoir lire vos vidéos une fois qu'elles auront été encodées. Et de vous donner l'information nécessaire sur les codec audio, les codec video utilisés pour encoder la vidéo. Ceci dit, vous n'êtes pas obligé de systématiquement de devoir renseigner ce type d'informations. Mais si vous le renseigner, ça va permettre au codec installé d'avoir une préférence de lecture pour être interprété correctement. Alors, pensez à les définir. Mais si vous les définissez ici, pensez également à venir les définir sur le htaccess, ici, afin de mettre en corélation les formats de fichier avec le type mime sur le serveur pour que le serveur les distribue. Une fois toutes ces informations données,il arrive très fréquemment que la première image de la vidéo soit soit une image noire, soit une image parasite et qui ne fait pas forcément esthétique sur la page. Donc pour cela, vous allez pouvoir définir une largeur imposée, une hauteur imposée à votre média. Et à ce moment là, vous pourrez définir l'attribut poster, ici, pointant vers une image png que vous aurez vous même réalisée dans un logiciel graphique, afin d'être utilisé comme première image de la vidéo. Le poster qui sera gardé, donc vous pouvez placer le titre, une image, de façon à contrôler cette première image et ne pas laisser le navigateur choisir parmi la première image de la vidéo qu'il va rencontrer. Pensez enfin en dernier point, de pouvoir indiquer un fallback si le navigateur ne prend pas en compte la vidéo ni les formats de fichier indiqué, à ce moment là, vous afficherez ce texte ou toute autre alternative qui sera publié à l'intérieur de la balise vidéo.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

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 !