Outils pour utilisateurs

Outils du site


tuto:creer_son_propre_blog:streams_formats_et_integration

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
tuto:creer_son_propre_blog:streams_formats_et_integration [2012-05-27 23:59] – créée mitsututo:creer_son_propre_blog:streams_formats_et_integration [2013-02-19 20:28] (Version actuelle) – modification externe 127.0.0.1
Ligne 6: Ligne 6:
  
   * OGG   * OGG
-  *   * Liste numérotéeTheora +       Liste numérotéeTheora 
-    * Vorbis +       Vorbis 
-    * Pas de royalties+       Pas de royalties
   * MP4   * MP4
-  *   * MPEG-4 AVC "H.264" +       MPEG-4 AVC "H.264" 
-    * AAC +       AAC 
-    * Royalties+       Royalties
   * WEBM   * WEBM
-  *   VP8 +    *   VP8 
-  *   Vorbis +    *   Vorbis 
-    * Pas de royalties+       Pas de royalties
  
 Contexte: le web s'est depuis toujours développé autour de formats exempts de tout payement de royalities: vous pouvez utiliser ces formats sans vous acquitter d'une licence d'utilisation auprès de son ayant-droit. Mais coup de théâtre lors de la normalisation HTML 5 portant sur les éléments multimédia (vidéo et audio): le W3C n'exige pas de la part des navigateurs qu'ils n'utilisent pas de formats soumis à royalities. Deux intervenants ont immédiatement pris position, l'un contre l'autre: Apple et Mozilla. Le premier, qui possède des droits sur le format MPEG-4 AVC, poussa ce format dans son navigateur Safari. Le second, qui défend l'ouverture du web, s'appuya sur le seul format libre de tout royalities ayant été suffisamment développé alors: Theora. Contexte: le web s'est depuis toujours développé autour de formats exempts de tout payement de royalities: vous pouvez utiliser ces formats sans vous acquitter d'une licence d'utilisation auprès de son ayant-droit. Mais coup de théâtre lors de la normalisation HTML 5 portant sur les éléments multimédia (vidéo et audio): le W3C n'exige pas de la part des navigateurs qu'ils n'utilisent pas de formats soumis à royalities. Deux intervenants ont immédiatement pris position, l'un contre l'autre: Apple et Mozilla. Le premier, qui possède des droits sur le format MPEG-4 AVC, poussa ce format dans son navigateur Safari. Le second, qui défend l'ouverture du web, s'appuya sur le seul format libre de tout royalities ayant été suffisamment développé alors: Theora.
Ligne 40: Ligne 40:
 En HTML, quand vous voulez intégrer une image, voici la syntaxe telle que recommandée par le W3C pour les normes HTML 4.01 et 5: En HTML, quand vous voulez intégrer une image, voici la syntaxe telle que recommandée par le W3C pour les normes HTML 4.01 et 5:
  
-<img width="x" height="y" alt="z" src="image.png">+<code html><img width="x" height="y" alt="z" src="image.png"></code>
  
 L'ordre des paramètres n'est pas important. L'intégration de streams WebM est similaire: L'ordre des paramètres n'est pas important. L'intégration de streams WebM est similaire:
  
-<video src="video.webm"></video>+<code html><video src="video.webm"></video></code>
  
 Ça c'est le code minimal. On va ajouter les contrôles (lecture/pause, volume,..) et un avertissement qui sera affiché si le navigateur ne sait pas traiter la balise <video> du HTML 5: Ça c'est le code minimal. On va ajouter les contrôles (lecture/pause, volume,..) et un avertissement qui sera affiché si le navigateur ne sait pas traiter la balise <video> du HTML 5:
  
-<video src="video.webm" controls>Attention, votre navigateur ne sait pas traiter des vidéos HTML 5 !</video>+<code html><video src="video.webm" controls>Attention, votre navigateur ne sait pas traiter des vidéos HTML 5 !</video></code>
  
 On va faire afficher la vidéo sur 250 pixels de largeur, et on va afficher une image tant que la vidéo n'est pas démarrée: On va faire afficher la vidéo sur 250 pixels de largeur, et on va afficher une image tant que la vidéo n'est pas démarrée:
  
-<video width="250px" poster="image.png" src="video.webm" controls></video>+<code html><video width="250px" poster="image.png" src="video.webm" controls></video></code>
  
 Démarrer automatiquement la lecture de la vidéo ?: Démarrer automatiquement la lecture de la vidéo ?:
  
-<video src="video.webm" controls autoplay></video>+<code html><video src="video.webm" controls autoplay></video></code>
  
 Intégrer à la fois du WebM et du MPEG-4 AVC: Intégrer à la fois du WebM et du MPEG-4 AVC:
  
-<video controls>+<code html><video controls>
 <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
 <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
-</video>+</video></code>
  
 Faire un fallback vers un stream Flash Megavideo: Faire un fallback vers un stream Flash Megavideo:
  
-<video controls>+<code html><video controls>
 <source src="video.webm" type="video/webm" onerror="fallback(this.parentNode)"> <source src="video.webm" type="video/webm" onerror="fallback(this.parentNode)">
 <object width="640" height="344"> <object width="640" height="344">
Ligne 90: Ligne 90:
 } }
 } }
-</script>+</script></code>
  
 Les développeurs en herbe pourront pousser plus loin en intégrant des événements javascript, des contrôles personnalisés, etc. Opera Software a publié un [[http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/|guide très complet]] :-) Les développeurs en herbe pourront pousser plus loin en intégrant des événements javascript, des contrôles personnalisés, etc. Opera Software a publié un [[http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/|guide très complet]] :-)
Ligne 98: Ligne 98:
 Sur Fansub Streaming, le code HTML 5 des streams HD est de ce type: Sur Fansub Streaming, le code HTML 5 des streams HD est de ce type:
  
-<video poster="http://www.fansub-streaming.eu/blog/wp-content/posterHD.svg" src="http://www.fansub-streaming.eu/stream/?v=/amv/VIDOK-Resistance.webm" controls></video>+<code html><video poster="http://www.fansub-streaming.eu/blog/wp-content/posterHD.svg" src="http://www.fansub-streaming.eu/stream/?v=/amv/VIDOK-Resistance.webm" controls></video></code>
  
 Vous savez donc à présent comment intégrer des streams WebM sur votre site. Il ne vous reste plus qu'à savoir comment créer des streams WebM, et ça, ça sera le sujet d'un article ultérieur :) Vous savez donc à présent comment intégrer des streams WebM sur votre site. Il ne vous reste plus qu'à savoir comment créer des streams WebM, et ça, ça sera le sujet d'un article ultérieur :)
  
  
tuto/creer_son_propre_blog/streams_formats_et_integration.1338163143.txt.gz · Dernière modification : 2013-02-19 20:28 (modification externe)