Prérequis

Vous devez maîtriser les cours N°1 et 2 avant de suivre ce cours

L'auteur

Aurélie ARROT

Html et Css

Cours suivants :

COURS 1 : Prise en main d'Html

COURS 2 : Les balises et attributs HTML

COURS 3 : Intégration multimédia en HTML

COURS 4 : Les feuilles de styles CSS

COURS 3 : Intégration mulimédia en HTML


 

 

LES OBJECTIFS :
Savoir intégrer du son et des vidéos, savoir utiliser les balises AUDIO et VIDEO

PUBLIC VISE : Tout utilisateurs qui souhaitent se former sur Html

 

 

PROGRAMME

 

Depuis HTML 5, il est facile d'intégrer du son et de la vidéo dans ses pages HTML.

Pour ce faire vous devez utiliser les balises AUDIO et VIDEO.

Ces 2 balises fonctionnent de la même manière et ont toutes les 2 des attributs en commun. Le premier est la source.

1) Les vidéos

Exemple de fichier source vidéo en html :

utilisation de la balise video en html 5

Vous remarquerez que la vidéo ne se lance pas. Pour le moment c'est normale. Il va falloir la gérer.

des options en natif :

La balise video possède des attributs interressants :

  • controls : permet de rajouter des boutons de contrôle de lecture standards (lecture/pause,barre de progression, plein-écran…)
  • autoplay : permet de lancer automatiquement la lecture dès que la vidéo commence à se charger
  • poster : lien vers une image d’illustration si la vidéo n’est pas disponible à l’adresse spécifiée
  • loop : relance la lecture quand cette dernière est terminée, encore et encore, en boucle
  • height et width : pour spécifier une hauteur et une largeur au lecteur
  • muted : coupe le son


  • Dans cet exemple, nous avons une vidéo avec des contrôles, dont le son est coupé, qui joue en boucle à partir du moment où elle est chargée et dont la taille a été limitée à 320x240 pixels :

    gestion native d'une video en html 5

    2) L'audio

    Nous resterons dans le cadre d'un player MP3 pour notre exemple.
    La balise AUDIO définit un flux ou un streaming audio, elle reste simple à utliser :

    utilisation de la balise AUDIO en html 5

    Voici l'aperçu dans le navigateur :

    Lecteur Mp3 en HTML 5

    des options en natif :

    La balise audio possède casiment les mêmes attributs que la balise video :

  • controls : permet de rajouter des boutons de contrôle de lecture standards (lecture/pause,barre de progression, plein-écran…)
  • autoplay : permet de lancer automatiquement la lecture dès que la vidéo commence à se charger
  • loop : relance la lecture quand cette dernière est terminée, encore et encore, en boucle
  • preload : pour spécifier si et comment seront pré-chargés les fichiers
  • src : indique l’adresse de votre fichier audio


  • Cette balise prend également en charge tous les attributs standard et tous les attributs d'évènement du HTML5 :
    Liste des attributs
    Liste des évènements

    La balise embed vous permet d'insérer du contenu non HTML. Elle représente un conteneur pour une application externe (plug-in). C'est cette balise que nous utilisons si nous voulons par exemple insérer une vidéo Youtube dans notre page HTML. Elle prend en charge les attributs standard et les attributs d'évènement en HTML 5.

    Elle possède des attributs interessants :

    • HEIGHT : Hauteur du fichier externe
    • SRC : adresse du fichier externe à insérer
    • WIDHT : Largeur du fichier externe
    • TYPE : indique le type-mime du fichier externe, cela est utilisé pour sélectionner le plug-in à instancier. Par exemple pour une vidéo quicktime, on pourra spécifier dans la balise embed : type="video/quicktime"
    Ici, dans notre site, nous utilisons la balise embed pour vous proposer nos vidéos tutos :

    insérer une vidéo youtube en html 5

     

    EXERCICES

    Les bases HTML

    EXERCICE : Mes series préférées exercices

    Contact

    SARL AAT's

    N° SIREN : 822580056 - N° TVA intracommunautaire : FR40822580056