Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

INSERER DU CONTENU VIDEO EN HTML

Les formats vidéo

Nous avons vu dans la partie précédente le problème de la non-prise en charge universelle d’un format audio par tous les navigateurs.

Pour la vidéo, nous allons retrouver ce problème, étant donné qu’une vidéo est composée d’un codec audio, d’un codec vidéo et d’un conteneur rassemblant ces deux éléments.

Une nouvelle fois, il va donc être conseillé d’utiliser différents formats vidéo afin de s’assurer une bonne compatibilité avec les navigateurs les plus utilisés par vos visiteurs.

Vous pouvez trouver ci-dessous le tableau des compatibilités entre les formats vidéo les plus utilisés et les dernières versions des navigateurs les plus utilisés.

Navigateur MP4 Ogg WebM
Chrome Oui Oui Oui
Safari Oui Non Non
Firefox Oui (seulement depuis la version 21) Oui Oui
Internet Explorer Oui Non Non
Opera Oui Oui Oui

L’élément video et ses attributs

L’élément video va s’utiliser exactement comme l’élément audio. De plus, il possède les mêmes attributs que ce dernier à savoir :

  • Un attribut controls pour ajouter les contrôles de base de la vidéo (lecture, arrêt, etc.) ;
  • Un attribut preload pour précharger la vidéo. Cet attribut accepte trois valeurs : auto (chargement total), metadata (chargement partiel de la vidéo) et none (pas de chargement) ;
  • Un attribut autoplay pour activer la lecture automatique de la vidéo ;
  • Un attribut loop pour lire une vidéo en boucle ;
  • Un attribut muted pour désactiver le son de la vidéo.

L’élément video va également posséder quelques attributs qui lui sont propres, notamment l’attribut poster qui va nous permettre d’afficher une image de fond avant que la vidéo ne soit lancée.

Voyons immédiatement un exemple d’insertion de contenu vidéo dans une page web. Pour cela, je me suis muni de deux versions d'un même fichier vidéo : « lever-soleil.mp4 » et « lever-soleil.ogg ».

Je vais également utiliser une image « lever-soleil.png », placée dans le même dossier, comme image de fond. Il faut bien penser à recadrer l’image à la taille de la vidéo avant.

Notez qu’on peut changer la taille de la vidéo sans problème en CSS en appliquant les propriétés height et width sur l’élément video.

L’élément HTML video pour insérer du contenu vidéo

Nous avons inséré du contenu vidéo en HTML dans notre page web

Notez que l’on pourrait aller beaucoup plus loin dans la personnalisation des options de notre lecteur vidéo, mais il nous faudrait pour cela connaître et utiliser le langage JavaScript.

Chapitre précédent

Chapitre suivant