Incorporer des Fichiers Vidéo dans vos Pages Web

La balise video
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :

  • Comprendre les formats vidéo compatibles avec les navigateurs web.
  • Apprendre à convertir des vidéos en différents formats.
  • Savoir utiliser la balise <video> avec des attributs appropriés.
  • Configurer un fichier .htaccess pour la prise en charge des fichiers vidéo.

Découvrez comment incorporer des fichiers vidéo en utilisant des formats tels que OGV, MP4 et WebM pour assurer une compatibilité avec différents navigateurs.

Dans cette leçon, nous explorons les méthodes pour intégrer des fichiers vidéo dans une page web. Vous serez guidé à travers les étapes de conversion de fichiers vidéo à l'aide de sites comme convertisseuronline.fr pour obtenir des formats compatibles tels que MP4, OGV et WebM. Nous couvrirons également l'utilisation de la balise HTML <video> et de ses attributs comme controls et source, pour permettre une lecture optimale sur divers navigateurs comme Chrome, Safari et Firefox.

Nous mettrons en exergue l'importance de commencer par le format MP4 dans votre liste de sources, pour assurer la compatibilité avec les anciennes versions de Safari et nous expliquerons comment ajouter des informations de codec pour une lecture plus efficace. Enfin, nous aborderons la configuration du fichier .htaccess pour que votre serveur reconnaisse correctement les différents formats vidéo.

Voir plus
Questions réponses
Pourquoi est-il recommandé de commencer par le format MP4 dans la liste des sources vidéo ?
Il est recommandé de commencer par le format MP4 pour assurer la compatibilité avec les anciennes versions de Safari qui peuvent avoir des difficultés à reconnaître les autres formats si MP4 ne figure pas en premier.
Quel est l'intérêt d'ajouter l'attribut 'controls' à la balise <video> ?
L'ajout de l'attribut 'controls' à la balise
Que se passe-t-il si le fichier .htaccess n'est pas configuré correctement pour les fichiers vidéo ?
Si le fichier .htaccess n'est pas configuré correctement, le serveur pourrait ne pas reconnaître les fichiers vidéo, entraînant des échecs de lecture ou d'affichage du contenu multimédia.
Dans cette leçon, nous allons voir comment incorporer des fichiers vidéo. Le tableau ci-dessous est le même que celui que nous avons regardé tout à l'heure pour les fichiers audio, donc il vous précise quels sont les formats à avoir pour pouvoir incorporer un fichier vidéo. Il s'agit des formats OGG ou bien OGV, on utilisera des OGV plutôt, du format MP4 pour la vidéo sous Safari notamment, et puis du format WebM qui permettra une lecture avec Chrome. Ces fichiers sont convertis de la même manière que ce que nous avons fait tout à l'heure. Depuis Chrome, on va sur le site convertisseuronline.fr et puis là, convertisseur audio, alors nous allons pouvoir, imaginons qu'on ait un format .mov, on va le télécharger et on le transformera en MP4, en OGG et en WebM. Par exemple, on peut le faire rapidement, je vais aller chercher un MP4, je vais aller convertir en MP4, sur la fenêtre qui s'ouvre ici, je vais pouvoir accéder à un petit bouton qui permet d'aller chercher le fichier, donc choisissez un fichier, et puis dans la fenêtre de mes différentes vidéos, par exemple, on va prendre n'importe lequel, celui-là, et on va pouvoir le convertir, on le récupérera dans la zone de téléchargement. Vous allez pouvoir réitérer cette action deux autres fois avec les autres formats. Une fois que vous avez réalisé ça, vous allez pouvoir incorporer votre vidéo à l'intérieur de la page. Alors c'est la même chose que pour l'audio, il s'agit d'une balise qui s'appelle cette fois-ci vidéo. Comme pour l'audio, il est intéressant de rajouter l'attribut contrôle qui permet de voir la barre de commande, autrement on verrait la vidéo, mais on ne pourrait pas la jouer puisqu'il n'y aurait pas la barre de commande, notamment le petit bouton play. Comme pour l'audio, on utilise la balise source avec l'attribut src égal. Je vais aller chercher ma vidéo, donc c'est le dossier vidéo, et je vais récupérer le nom de ma vidéo que je ne connais pas. RER, vidéo, mp4, ensuite je vais tout de suite terminer ça, copier, coller et coller. Ensuite on met du webm, et puis enfin de l'ogv pour cette vidéo. Il est conseillé de commencer par le mp4, parce que d'anciennes versions de Safari ne reconnaissaient pas autrement un mp4 si tu es après un autre format de fichier, pour une meilleure compatibilité avec de vieilles versions de Safari. Donc ici il est conseillé aussi d'ajouter l'attribut type, ce qui évitera au navigateur de rechercher trop le type. Cette fois nous allons écrire vidéo, tout à l'heure on avait écrit audio, et puis c'est tout simplement mp4. Voilà pour celui-là, ensuite pour l'autre. Là on met un webm, et puis on met ici un ogv. Alors il est conseillé également d'ajouter le codec, donc on écrit codec avec un s parce qu'il s'agit de deux codecs, le codec vidéo et le codec audio. Alors je vais écrire simplement le premier, c'est un codec qui est facilement récupérable en lisant les informations de la vidéo, dans VLC par exemple, ou dans QuickTime. Donc codec égale, alors c'est toujours quelque chose de compliqué, avc1.42e01e, ainsi pour notre premier codec qui est le codec vidéo, une petite virgule, et ensuite mp4a40.2. Et on ferme les guillemets. Voici alors, je ne l'ai pas inventé, je l'ai simplement récupéré avec VLC. Donc on pourrait faire exactement la même chose pour les autres sources. Alors maintenant nous allons pouvoir voir notre résultat, j'enregistre. On regarde notre fichier index. Nous avons bien notre vidéo à l'écran. Alors on va essayer sur les autres navigateurs. On l'ouvre cette fois-ci avec Firefox. Ça fonctionne également. Je vais l'arrêter parce qu'autrement je vais avoir plein de vidéos qui vont fonctionner en même temps. Sur Safari, ça marche. Et enfin sur le navigateur Opera, qui n'est pas très utilisé, il faut bien le dire. Voilà, donc là nos vidéos fonctionnent sur l'ensemble de nos navigateurs. Alors une dernière précision. J'en parle ici mais on en reparlera certainement à d'autres moments. Lorsque vous souhaitez mettre en ligne une vidéo ou bien un autre fichier audio, alors c'est à peu près le même principe, là on a pour les deux éléments, il va falloir faire un fichier qui s'appelle htaccess, qu'il faudra mettre à la racine de votre serveur web. Je vous montrerai au moment où on regardera comment on fait pour mettre en ligne. Mais voilà, il suffit d'écrire exactement ça parce que tous les serveurs ne sont pas aptes. Généralement c'est le cas mais ils ne sont pas forcément tous aptes à lire des fichiers audio et des fichiers vidéo de ce format. Donc il suffit de lui dire qu'il doit accepter les types de fichiers ci-dessous. Donc add type, espace, vidéo slash ogg, et puis espace, l'extension, .ogv. Pareil pour mp4, .mp4, webm, .webm, là on pourrait même corriger en ogv. Et puis ogg pour l'audio, .ogg. Donc ce fichier-là, vous créez un fichier texte tout simplement, fichier texte classique, vous écrivez ces quatre lignes et vous l'enregistrez avec n'importe quoi, .htaccess, et il faut que ce fichier soit au format utf-8. Normalement on le trouve avec les éditeurs de texte classiques, ou en tout cas les éditeurs de texte très basiques le font, tels que TextEdit, par exemple, ou d'autres SimpleText ou d'autres logiciels de texte basiques. Donc surtout utf-8, et puis on écrit ces quatre lignes, et ensuite on incorporera ce fichier sur le serveur, ce qui permettra d'avoir une meilleure lecture, d'avoir une lecture plus certaine.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5