accueilPlayer 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