HTML5 video.ogv et audio .oga

logo HTML5Voici donc ces fameuses balises <video> </video> et <audio> </audio>

HTML5 voit se dessiner une bataille rangée du propriétaire contre le libre. Puisqu'il s'agit du ouaibe en première ligne bien sûr les navigateurs web. Plutôt que transférer ma video.ogg sur Dailymotion où parfois on a de mauvaises surprises à l'encodage comme des erreurs de buffering,  je l'ai placée directement dans une rubrique de mon site grâce aux balises <video>  à:  http://www.wubijacq.com/capturesonore/ .
Où j'ai converti la vidéo OGV en WEBM et en MP4 pour qu'elle soit lisible par la plupart des navigateurs.   

Les principaux acteurs du monde du ouaibe

Au départ un consortium: la World Wide Web Consortium (w3c) qui gère l'affaire et contrôle la conformité des codes employés sur le ouaibe entre-autres HTML, XML, XHTML, CSS, etcætera
Les pourvoyeurs de système d'exploitation: Windows Microsoft ©, MacIntosh, Canonical, Redhat , Opera mobile, Google maintenant aussi
Et leurs navigateurs par défaut dont les plus populaires: Internet Explorer, Safari, Google-chrome, Firefox, Opera
devraient se décider à une certaine standardisation pour permettre aux webmasters et aux éditeurs d'être lu correctement par tous les internautes

Mais les grands propriétaires tardent à reconnaître les avancées du libre

Ainsi Windows©microsoft© et Mac© s'entendent pour favoriser le format video propriétaire H.264 au détriment du format vidéo libre ogg-theora-vorbis ou webm-vp8-vorbis
mozilla-firefox, google-chrome et opera-browser favorisent le format libre

ie9 a reçu une bonne note de la part de la W3C pour sa bonne conformité aux normes...à suivre

Une solution: envoyer la vidéo sous plusieurs formats

Quelques nouveautés et outils de html5 video






HTML5 ce n'est pas simplement de la vidéo ou de l'audio

C'est le successeur de HTML 4.01

Pour construire une page en HTML5, plus besoin de DOCTYPE suivi du DTD strict, transitional ou frameset
Juste <!doctype html> en haut de la page suivi de
<html lang fr>


alsacréation le moteur dl'inventivité


Internet Explorer ne lit pas nativement les fichiers OGG et OGV


Pour un fichier vidéo.


fichier .ogv
<video controls=controls width=550 height=450><src="wubijacq.ogv" type=video/ogv>mettez ce que vous voulez ici</video>

Ce qui donne pour transférer sur le web:

<video controls=controls width=550 height=450><src="http://monsite/rubrique/wubijacq.ogv" type=video/ogv>get firefox,google or opera to read these files</video>



Pour un fichier audio


fichier .ogg
<audio controls=controls src="http://monsite/rubrique/ma_musique.ogg" type="audio/ogg"></audio>

Parfois il faut bidouiller un peu comme par exemple sur Opera où j'ai été obligé de remplacer les balises <audio> par des balises <video> puisque avec les balises <audio>, cela ne fonctionnait pas du tout pour un son .ogg

fichier.wav
la balise <embed> qui avait été dépréciée par le HTML4 est réhabilitée
avec HTML5  (pas de balise de fermeture)
<embed width=300 height=15 src="http://machin.com/rubrique/ma_musique.wav" controller="true" autoplay="false" autostart="false" type="audio/x-wav" >

Les deux fichiers audio: ogg et wav ICI

Et n'oubliez pas de placer les balises HTML

Particularité du format .oga

Le format OGG comme le format AVI est un conteneur. Pour OGG, le codec video est Theora et le codec audio est Vorbis. Je renomme maintenant automatiquement mes vidéo .ogv en vidéo .ogg.
Pour les fichiers audio .oga, je fais de même, ce qui me permet de mettre parfois les sons .ogg entre des balises <video>....</video>, c'est pratique avec un "width" et un "height" adaptés aux dimensions du bidule exemple 100px sur 30px:

Avec les balises VIDEO width=100px height=30px

   

Avec les balises AUDIO sans width et sans height définis


Placer une image et un bouton à la place du bidule

C'est plus joli et c'est possible aussi avec la balise audio, avec une image, un bouton et avec un peu de JavaScript (document .get ElementById):




Le code est très simple:
<audio id=a1 src="http://www.wubijacq.com/freedesktop/kde-sys-log-in-long.ogg" type=audio/ogg ></audio><img src="http://www.wubijacq.com/images/sound.png"><br>
<button onclick="document .getElementById('a1') .play()">play</button>


Vous pouvez copier-coller ce code pour le tester
Il est possible ainsi de classer vos fichiers audio dans une liste ou dans un tableau avec a1, a2, a3, a4... etcetera
Vous avez aussi la possibilité avec les balises video et poster à la place de l'image

Post dans notre forum

à propos de

si le post est déjà ouvert



statistiques

who's.amung.us
  Partager

  
message wwg1.com






www.wubijacq.com Cliquez ici pour vous abonner à ce flux RSS