HTML5 video.ogv et audio .oga

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

HTML5 a vu se dessiner une bataille rangée du propriétaire contre le libre. Puisqu'il s'agissait 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>  à:  https://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, 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 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

Présenter la vidéo sous plusieurs format sur votre site web

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 fallait bidouiller un peu comme par exemple sur Opera où j' étais obligé de remplacer les balises <audio> par des balises <video> pour avoir un son .ogg
Mais cela ne fonctionnait que avec Opera et maintenant Opera gère bien les balises <audio>

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="../freedesktop/kde-sys-log-in-long.ogg" type=audio/ogg ></audio><img src="../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






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