images - Cours

La balise video

Il suffit d'une simple balise vidéo pour insérer une vidéo dans un fichier html.

Mais, là encore, aucun contrôle ne permet de lancer la vidéo !

Exemple

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> vidéo  </title>
         
    </head>
    <body>
         <p> Une vidéo non accessible : 
            <video src="videos/chat.mkv" ></video>
        </p>
    </body>
</html>

quelques atributs

Il faut rajouter quelques attributs (la plupart sont les mêmes que pour la balise audio) :

L'attribut src (source) est indispensable pour toute balise video puisque c'est avec cet attribut src que l'on va préciser l'adresse où se situe cette vidéo.

L'attribut controls est indispensable dans la balise video , il vous permet d'ajouter les boutons "Lecture", "Pause" et la barre de défilement. vous vous demandez peut-être pourquoi ça n'y est pas par défaut, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du Javascript.

poster : image à afficher à la place de la vidéo lorsque celle-ci n'est pas lancée.

controls : pour ajouter les boutons "Lecture", "Pause" et la barre de défilement.

width : pour modifier la largeur de la vidéo. height : pour modifier la hauteur de la vidéo.

loop : la vidéo sera jouée en boucle.

autoplay : la vidéo sera jouée dès le chargement de la page.

apreload : indique si la vidéo peut être pré-chargée dès le chargement de la page ou non. Elle peut prendre les valeurs :auto (par défaut) : le navigateur décide s'il doit pré-charger toute la vidéo, uniquement les métadonnées ou riendu tout.

metadata : charge uniquement les métadonnées (durée, dimensions, etc.).

none : pas de pré-chargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.

Exemple.
Le fichier dans lequel nous écrivons se trouve dans le répertoire (ou dossier) nommé videos. Dans ce fichier (il s'agit d'un fichier html), nous voulons créer un lien vers le fichier vidéo chat.mkv.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> vidéo  </title>
         
    </head>
    <body>
        <p>   Les animaux : 
            <video controls  src="videos/Chat.mkv" width="300" height="300" > </video>
			</p>
         
    </body>
</html>

ou bien

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> vidéo  </title>
         
    </head>
    <body>
        <p>   Le transistor : 
			<video controls src=" videos/transistor.webm" poster="videos/carte_mere.png"  style="margin-left:100px;margin-top : 40px;" width="500">Veuillez mettre à jour votre navigateur internet</video>
        </p>
         
    </body>
</html>

Les formats

Le stockage de la vidéo est autrement plus complexe. On a besoin de 3 éléments :

Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On les reconnaît à l'extension du fichier en général : AVI, MP4, MKV...

Un codec audio : c'est le format du son de la vidéo, généralement compressé. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG...

Un codec vidéo : c'est le format qui va compresser les images. Ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement.

Les principaux à connaître pour le Web sont :

H.264 : l'un des plus puissants et des plus utilisés aujourd'hui... mais il n'est pas100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur son site web), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.

OggTheora : un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux, mais sous Windows il faut installer des programmes pour pouvoir le lire.

WebM : un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux à H.264 à l'heure actuelle.

Pour convertir une audio ou un vidéo dans ces différents formats, on peut utiliser le logiciel FreeStudio : Cela vous permettra de créer plusieurs formats de votre audio ou vidéo !

Ceux qui ont un navigateur récent ne verront pas le message. Les anciens navigateurs, qui ne comprennent pas la balise, afficheront en revanche le texte qui se trouve à l'intérieur.

On peut utiliser la balise source> à l'intérieur de la balise video pour proposer différents formats. Le navigateur prendra celui qu'il reconnaît :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> plusieurs formats </title>
    </head>
    <body>
      <p> proposition de plusieurs formats   : 
            <video controls poster="videos/carte_mere.png" width="600">
				<source src="videos/transistor.webm" />
				<source src="videos/transistor.mkv" />
				<source src="videos/transistor.mp4" />
			</video>

        </p>
    </body>
</html>