création de site internet

flus RSS du blogsur Facebooksur Twitter
créateur de mot de passe

Générateur de mot de passe

Créez un mot de passe sécurisé

24
10

2 players video en HTML5

dans Outils

Avec HTML5, sont apparus de nouvelles fonctionnalités et une meilleure prise en charge de la vidéo. Il est maintenant aussi facile d'intégrer une vidéo qu'une simple image. Finie la dépendance aux players vidéo en Flash, Quicktime ou autre. Maintenant la vidéo est intégrée directement et nativement dans la source de vos pages. Et couplé avec Javascript, il est tout aussi facile d'en prendre le contrôle.

Forts de ces nouvelles possibilités, de nombreux plugins sont développés et voient le jour. Voici la présentation de deux de ces players vidéo en HTML5.

Video.js, un player simple, personnalisable et fiable

L'utilisation du player Video.js passe par l'intégration d'un fichier css et d'un fichier javascript dans le <head> de votre page, et le paramétrage du chemin d'accès au fichier swf.

<link href="http://www.monsite.com/chemin-vers-dossier-videojs/video-js.css" rel="stylesheet">
<script src="http://www.monsite.com/chemin-vers-dossier-videojs/video.js"></script>
<script>
     _V_.options.flash.swf = "http://www.monsite.com/chemin-vers-dossier-videojs/video-js.swf"
</script>

A noter qu'il est également possible d'exploiter la version CDN en ligne que propose Video.js. L'appel au player vidéo dans votre page se fait à l'aide de la balise HTML5 <video> et nécessite la personnalisation des attributs class et data-setup. L'attribut id doit être propre à chaque player vidéo de la page.

<video id="ma_video" class="video-js vjs-default-skin" controls
     preload="auto" width="640" height="264" poster="ma_video_poster.png"
     data-setup="{}">
     <source src="ma_video.mp4" type='video/mp4'>
     <source src="ma_video.webm" type='video/webm'>
     <source src="ma_video.ogg" type='video/ogg'>
</video>

L'attribut data-setup permet de paramétrer les différentes options en les indiquant (au format JSON). Ces dernières sont relativement basiques et n'impacte que les fonctionnalités simple du player ainsi que son affichage. L'attribut class permet de personnaliser l'affichage du player en jouant sur le css du skin fourni par défaut.

Une API est fournie, afin de prendre le contrôle du player vidéo avec Javascript. Très complète, elle permet de gérer la lecture de la vidéo et les événement qui interviennent.

Dernières fonctionnalités intéressantes, Video.js permet un affichage en plein écran et supporte les sous-titres fournis par la balise HTML5 <track>.

En terme de compatibilité, Video.js peut être exploité par la grande majorité des navigateurs qui supportent le HTML5, aussi bien sur PC que plateforme mobile. Pour les navigateurs non-compatibles ou ne supportant pas HTML5, le fichier swf renseigné affiche un player vidéo en flash comme alternative à Video.js.

Le site officiel : videojs.com

LeanBack Player, un player et des outils avancés

Tout comme Video.js, LeanBack Player est un player vidéo qui se base sur la balise HTML5 <video> et le javascript, pour jouer et contrôler des vidéos. Mais beaucoup plus poussé et complet que Video.js, il propose une multitudes d'options, de fonctionnalités et d'outils pour l'intégrer. Néanmoins, en fonction de la version que vous utiliserez (gratuite ou payante) tout n'est évidemment pas disponible.

L'intégration du player est classique, avec l'appel de fichiers css et javascript dans le <head> de votre page

<link rel="stylesheet" type="text/css" href="chemin-vers-dossier-leanbackplayer/leanbackPlayer.default.css"/>
<script type="text/javascript" src="chemin-vers-dossier-leanbackplayer/leanbackPlayer.pack.js"></script>
<script type="text/javascript" src="chemin-vers-dossier-leanbackplayer/leanbackPlayer.en.js"></script>
<script type="text/javascript" src="chemin-vers-dossier-leanbackplayer/leanbackPlayer.fr.js"></script>

Dans la page, le player vidéo nécessite la balise HTML5 <video> et doit être intégré dans un <div>

<div class="leanback-player-video">
     <video width="360" height="240" preload="metadata" controls poster="ma_video_poster.png">
          <source src="ma_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
          <source src="ma_video.webm" type='video/webm; codecs="vp8, vorbis"'/>
          <source src="ma_video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
     </video>
</div>

Les fonctionnalités du player sont entièrement paramétrables via les nombreuses options disponibles, des boutons de contrôle qui sont proposées aux comportements par défaut. Son apparence est également personnalisable. D'ailleurs une série de 5 thèmes prêts à l'emploi est proposée.

Doté de nombreuses autres fonctionnalités intéressantes, LeabBack Player permet :

Et cerise sur le gateau, l'éditeur met à disposition un outil pour configurer et générer son player clé en main !

Etant basé sur HTML5, le player ne fonctionne que sur les navigateurs nouvelles générations et sur les supports mobiles. Néanmoins il est possible d'intégrer une alternative avec un player vidéo en Flash.

Documentation et exemples : leanbackplayer.com

Partager :