[HTML 5] Gérer la vidéo

Le W3C aura pris son temps, mais enfin une nouvelle version de l’HTML existe. Disons tous ensemble : « Bonjour HTML 5 ! ». Avec cette nouvelle version sont arrivées de nombreuses nouveautés. Enfin, nouveautés, plutôt des possibilités natives à la place de plugin à rajouter dans son HTML comme le très conne Flash d’Adobe. Une de ces nouveautés est le lecteur vidéo intégré à HTML 5. Comment fonctionne t’il ? Et bien, comme ceci :

 

<video src= »../video/myMovie.mp4″ />

 

Génial non ? Alors pourquoi en faire un article ? Eh bien parce que vous découvrirez que là, vous allez rencontrer certains problèmes. De un, il n’y aura aucun contrôleur pour visionner votre vidéo. De deux, sous Mozilla par exemple cela ne fonctionnera juste pas !

Réglons un problème à la fois. Commençons par rajouter les contrôleurs :

 

<video src= »../video/myMovie.mp4″ controls />

 

Vous pouvez tester, maintenant, vous pouvez démarrer facilement votre vidéo. Pourquoi n’y a t’il pas de valeur derrière ? Tout simplement parce qu’en HTML 5, si un boolean est mentionné dans une balise, il prend d’office la valeur inverse de celle par défaut.

Pour ce qui est de Mozilla, il faut allez faire un tour sur ce site. On y voit les codecs supportés par les navigateurs. Pour assurer de fonctionner sur la majorité de ceux-ci, il va falloir avoir un fichier mp4 et un WebM. Comment faire ? Eh bien nous allons simplement donner plusieurs sources à notre balise :

 

<video controls>
<source src= » »../video/myMovie.mp4″ type= »video/mp4″>
<source src= » »../video/myMovie.webm » type= »video/webm »>

<p>Votre navigateur ne supporte pas la video HTML 5</p>

</video>

 

Voilà une balise video pleinement utilisée. Pourquoi ce message en fin ? Eh bien si le navigateur ne supporte aucune source, ce message sera affiché d’office à la place du lecteur vidéo. Bonne amusement avec cette nouvelle découverte !

Publicités
Tagged with: , , ,
Publié dans Autres Langages
2 comments on “[HTML 5] Gérer la vidéo
  1. Fidei dit :

    Je conseille l’utilisation de Video.JS http://www.videojs.com/
    Permet d’utiliser la balise video du HTML5 sans compromis sur les navigateurs ne supportant pas celle-ci (grâce à un plugin flash pour les vieux IE par exemple).

    Tchuss,

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :