Player Video HTML5 jQuery CSS3

Player video compatible avec les navigateurs modernes ( Chrome 4, Firefox 3.6, Safari, Opera 10.5 ) - développé en Javascript HTML5 et CSS3

Version minimum jQuery : 1.4.2 (inclus dans le package du plugin)

Version minimum jQuery UI : 1.8 (inclus dans le package du plugin)

Exemple

Comment l'utiliser?

Après avoir télécharger les différents fichiers, il suffit juste de lier le plugin à l'élément HTML qui affichera le player en rajoutant le code ci dessous dans des balises <script> $(function(){ $( '#videoHtml').video.defaults = { autoplay:true, loop: false, width:300, height:200, initialVolume:0.5, firstSource:'http://www.w3schools.com/html5/movie.ogg' }; $( '#videoHtml').video(); });

Explications

$( '#videoHtml').video.defaults : objet qui contient les différentes options du lecteur
$( '#videoHtml').video() : utilisation du plugin

Si vous ne voulez pas que le player joue une video au démarrage, vous pouvez mettre le paramètre autoplay à false
Pour faire démarrer la video, vous n'avez plus qu'a cliquer sur le bouton central "play" ou sur celui de la barre de controles ou encore en lien un bouton à la méthode de play du plugin: $( '#videoHtml').video.play()

Méthodes

$( '#videoHtml').video.play() permet de lancer une video $( '#videoHtml').video.pause() permet de mettre en pause/play une video $( '#videoHtml').video.stop() permet de stopper une video $( '#videoHtml').video.src(url_de_la_video) permet de charger une nouvelle video. Il faudra inserer un play() juste après si l'on veut que ce contenu se joue directement. $( '#videoHtml').video.fullscreen() permet de mettre une video en plain écran. Attention cette méthode ne produit pas un vrai plein écran. La spécification html5 ne permet pas à ce jour d'avoir ce rendu.
Néanmoins, la video s'élargira en fonction de son conteneur et de ces limites de largeur et de taille

Télécharger le plugin

Télécharger HTML5video

retourner en haut de la page