Un peu de code pour commencer
CODE HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta charset="utf-8" />
<title>VIDEO HTML5</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<video controls src="http://www.tutomania.com/html5/tbbt.ogv">
Texte alternatif au cas ou l'utilisateur ne puisse afficher les vidéos.
</video>
<video width="400" height="302" controls="controls">
<source src="http://www.tutomania.com/html5/tbbt.ogv" type="video/ogg" />
<source src="http://www.tutomania.com/html5/tbbt.mp4" type="video/mp4" />
<source src="http://www.tutomania.com/html5/tbbt.webm" type="video/webm" />
Texte alternatif au cas ou l'utilisateur ne puisse afficher les vidéos.
</video>
</body>
</html>
La première ligne <video> est une intégration simple de vidéo sous Html5
CODE HTML
<video controls src="http://www.tutomania.com/html5/tbbt.ogv">Ici la description alternative</video>
Simple ? oui, cependant il est préférable de fonctionner différemment.
Pourquoi ? Parce que si Firefox lit nativement OGG il en est surement pas de même pour d'autres navigateurs.
Quand je parle de navigateur je ne parle pas spécialement de ceux présent sur PC, Linux ou MAC mais aussi présent sur Smartphone et autres tablettes
(Iphone, Android, Ipad etc.)
Les problèmes de lecture de vidéo sur la toile ne se posait par réellement puisque cela était la plupart du temps géré par flash, la majeure partie des gens (par la force des choses il faut le dire) disposait du plugin Flash. Aujourd'hui on peux se passer aisément de Flash en terme de lecture vidéo sur la toile, encore faudrait-il que tout le monde puisse lire nos vidéos.
La deuxième méthode est donc meilleure et permet de rendre la compatibilité plus étendue.
Ainsi si le navigateur ne connait pas un format il essayera de lire le suivant
CODE HTML
<video width="400" height="302" controls="controls">
<source src="http://www.tutomania.com/html5/tbbt.ogv" type="video/ogg" />
<source src="http://www.tutomania.com/html5/tbbt.mp4" type="video/mp4" />
<source src="http://www.tutomania.com/html5/tbbt.webm" type="video/webm" />
Texte alternatif au cas ou l'utilisateur ne puisse afficher les vidéos.
</video>
Sachez également que le player HTML5 sera customisable en tout point avec CSS et/ou Jquery:
Démo ici
Ne pas oublier !
Pour que la lecture sous HTML5 fonctionne vous devez définir les types MIME dans un fichier .htaccess.
CODE
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Les attributs disponibles
Attribut controls : Affiche les barres de contrôle de la vidéo
Attribut autoplay : Si activé démarrage auto de la vidéo
Attribut width : Spécifie la largeur de la vidéo
Attribut height : Spécifie la hauteur de la vidéo
Attribut loop : Si activé, la vidéo se jouera en boucle
Attribut preload : Si activé, la vidéo sera chargé dès l'affichage de la page. Autoplay sera alors ignoré
Attribut preload : Spécifie l'url vers votre fichier vidéo
CODE
src="http://www.tutomania.com/html5/ma_video.mp4"
Logiciel gratuit de conversion de vidéo
http://www.mirovideoconverter.com
http://opensource.grisambre.net/wtheora/
Informations et démos
http://fr.wikipedia.org/wiki/WebM
http://fr.wikipedia.org/wiki/Theora (OGG)
http://fr.wikipedia.org/wiki/H.264
http://html5demos.com/
Sondage du mois
La connaissance ne vaut que si elle est partagée par tous
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres - Bots
Anniversaire du jour
Amis en ligne (0)
La bifle - Extrait
