Exemples d'intégration de vidéos dans une page Web.

3 formats sont possibles, mais ils ne fonctionnent pas tous avec tous les navigateurs.

1) .webm est le container qui contient les formats libres :
1.a) VB8 pour la vidéo
1.b) Vorbis pour le son

2) .ogg est le container qui contient les formats libres :
2.a) Theora pour la vidéo
2.b) Vorbis pour le son
  Je trouve que la qualité du format "Theora" est moins bonne que celle du format "VB8".

3) .mp4 est le container qui contient les formats :
3.a) h.264 pour la vidéo
3.b) AAC pour le son
  Chez moi, avec Firefox 23.0, sous GNU/linux, ce format ne fonctionne pas.
  Chez moi, avec Firefox 29.0, sous GNU/linux, ce format fonctionne.

Il faut mettre dans le dossier contenant le fichier .html référençant les vidéos, un fichier au nom de ".htaccess"
Son contenu est :
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

C.f. http://www.w3schools.com/html/html5_video.asp.
Tutoriel pour convertir des videos au format WebM ou Ogg. Cliquez ici.
Il semble que "webm" soit meilleur, en tout cas, j'obtiens une meilleur qualité avec ce format.
Autre info

Pour comprendre la différence entre "container", "codec" et "format", voir le lien suivant de avidemux.
Le lien suivant est aussi intéressant.

Une vidéo qui explique le fonctionnement de Avidemux .
Malheureusement, il ne permet pas de convertir au format du container .webm.

Pour convertir dans les format .ogg (.ogv) ou .webm :
Depuis la logithèque Ubuntu, on peut installer : OggConvert, qui ira dans "Multimedia". Il fonctionne très bien.

Depuis firefox, on peut installer le module "Firefogg", qui permet de convertir aux formats .ogg et .webm (ce sont des containers, pas des formats). Cela a pris du temps, mais la conversion au format .webm est très bonne.

J'ai testé "Arista" et "Miro", sans succès pour les installer.

En principe, ".webm" est de meilleure qualité que ".ogg", mais j'ai de la peine à trouver des logiciels qui convertissent de .avi en .webm. Firefogg le fait très bien, mais est très lentement.

J'ai trouvé beaucoup d'informations sous : http://www.webmproject.org/tools/

Je l'ai converti en utilisant VLC 2.08 sous GNU/linux, "Convertir / Enregistrer..."
"Fichier" < "Ajouter..." puis "Convertir / Enregistrer"
"Profil" : Video - VP80 + Vorbis (Webm)
Dans l'icône, sous l'onglet Codecs vidéo, j'ai choisi l'échelle 0.3333333, largeur 640 et hauteur 360.
Onglet Codecs audio, j'ai choisi la fréquence d'échantillonnage : 22050.

Première Vidéo : dsc_8147.webm, de 7,8 Mo, taille 640x360 au dimensions 16/9.


2e Vidéo : dsc_8148.webm, de 6,4 Mo, taille 640x360 au dimensions 16/9.


3e Vidéo : dsc_8152.webm, de 14,4 Mo, taille 640x360 au dimensions 16/9.


4e Vidéo : dsc_8153.webm, de 6,9 Mo, taille 640x360 au dimensions 16/9.


Vidéo : dsc_8154.webm, de 7,3 Mo, taille 640x360 au dimensions 16/9.


Vidéo : dsc_8154_h264_AAC.mp4, de 1,0 Mo, taille 640x360 au dimensions 16/9.
C'est la même vidéo que précédemment, mais à le codage h.264 et AAC.
Chez moi, cette vidéo ne fonctionne pas !


Ici, on donne le choix entre deux format, .mp4 et .webm pour le fichier "_8154".


Vidéo : dsc_8154.ogg, de 4,8 Mo, taille 640x360 au dimensions 16/9.
La qualité est visiblement moins bonne.


Vidéo : dsc_8155.webm, de 7,2 Mo, taille 640x360 au dimensions 16/9.


Vidéo : dsc_8161.webm, de 2,3 Mo, taille 640x360 au dimensions 16/9.


Vidéo : dsc_8165.webm, de 68,7 Mo, taille 640x360 au dimensions 16/9.


Vidéo : dsc_8169.webm, de 5,5 Mo, taille 640x360 au dimensions 16/9.



Plan de site : index.php     javascript      videos.html
    ( Page Web = http://www.juggling.ch/gisin/javascript/Videos/videos.html)


Page mise à jour le 28 mai 2014 par Bernard Gisin
Hébergement par : www.infomaniak.ch