Vidéos HTML5 et qualité

[Pochtroi]

Bonjour,

Dans mon site tout rénové en HTML5, j'intègre une vidéo, qui avant ça était une intégration de lien Youtube (iframe), mais maintenant, grâce à la balise <video>, la vidéo est hébergée directement sur mon site et j'utilise des balises HTML toutes bêtes.

Suite à la lecture d'OpenClassRooms sur l'HTML5, j'ai cru comprendre qu'en proposant les formats .mp4 et .ogg, je pourrai être lu par tous les navigateurs. Ce que j'ai donc fait comme ceci :

  <video controls poster="Corbinola/marinu.jpg" width="560">
  <source src="Corbinola/corbinola.mp4" />
  <source src="Corbinola/corbinola.ogg" />
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Q5USKnPphxs?rel=0" allowfullscreen></iframe>
  </video>

Il semble que le navigateur soit capable de choisir le format qui l'arrange, voire le lien Youtube s'il ne prend pas en compte l'HTML5.

Le souci est que mon fichier en mp4 est en qualité assez élevée. Je voudrais proposer des qualités plus faibles. Que se passera-t-il si j'intègre ma vidéo comme ceci :

  <video controls poster="Corbinola/marinu.jpg" width="560">
  <source src="Corbinola/corbinola-hd.mp4" />
  <source src="Corbinola/corbinola-medium.mp4" />
  <source src="Corbinola/corbinola-low.mp4" />

  <source src="Corbinola/corbinola-hd.ogg" />
  <source src="Corbinola/corbinola-medium.ogg" />
  <source src="Corbinola/corbinola-low.ogg" />
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Q5USKnPphxs?rel=0" allowfullscreen></iframe>
  </video>

Le navigateur sera-t-il capable de choisir la version qui convient par rapport à la connexion disponible ?

Merci pour les infos.

PS : le nouveau site est en ligne

 

[momo-fr]

Pourquoi ne pas laisser Youtube donner le bon flux vidéo ?

Voir le sujet chez OpenClassRooms…

La balide vidéo HTML chez Google/Youtube

 

[Pochtroi]

Dans Openclassrooms, m@teo propose :

<video controls poster="sintel.jpg" width="600">
  <source src="sintel.mp4">
  <source src="sintel.webm">
  <source src="sintel.ogv">
  Il est temps de mettre à jour votre navigateur !
</video>

Sauf que je remplace "Il est temps de mettre à jour votre navigateur !" par une video embarquée Youtube :

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q5USKnPphxs?rel=0" allowfullscreen></iframe>

Il semble qu'en indiquant plusieurs formats de vidéo (.mp4, .ogg...), le navigateur choisisse de lui-même celui qu'il est cabable de lire. Moi, je voudrais lui proposer diverses qualités pour un même format comme proposé plus haut, mais je pense que s'il sait lire le format, il ne se souciera pas de la qualité et prendra le premier lien proposé. Alors en effet, s'il ne peut rien lire, il ira voir le lien YouTube, qui lui propose plusieurs qualités, mais je voudrais que s'il peut lire directement sur mon hébergement et choisir la qualité adaptée, il le fasse....

 

[momo-fr]

OK, à toi de voir… la vidéo ça bouffe de la bande passante et il faut de la ressource en face, si tu as ça pourquoi pas.

 

[Pochtroi]

Je pense que ça passe sachant que c'est la seule vidéo du site :

 

[Pochtroi]

J'ai trouvé ça :

Le W3C a prévu dans sa spécification de pouvoir intégrer plusieurs sources pour une même vidéo donc plusieurs codecs.

Important à noter aussi, c’est les containers utilisables :

.mp4 pour les vidéos en H.264
.webm pour les vidéos en WebM
.ogv pour les vidéos en Theora

Note : dû à un bug sur l’iPhone/iPad iOS 3.x, la source .mp4 (H.264) doit être mise en premier dans la liste.

Remarque complémentaire : pensez aux périphériques mobiles (tablettes & smartphones) en proposant une version basse résolution de la vidéo (moins consommatrice en bande passante et CPU/GPU pour le décodage)

ce qui semble dire qu'on peut mettre plusieurs qualités dans la balise.

Les limites de la balise vidéo dans HTML5

Adaptation dynamique de la qualité du streaming :

Là encore, face aux technologies concurrentes (Flash, Silverlight), HTML5 et sa balise video sont encore jeunes. Le player vidéo de Silverlight supporte notamment la technologie Smooth Streaming qui permet d’ajuster le flux vidéo à la bande passante disponible. Flash dispose de son côté d’une technologie baptisée HTTP Dynamic Streaming

Là, ils veulent parler de changement de qualité en cours de lecture ?
Mais si je comprends bien, le navigateur peut choisir au chargement de la page la qualité la plus adaptée pour lui.