LeanBack

Leanback player est un lecteur vidéo / audio HTML5 très complet et compatible avec un grand nombre de navigateurs.

Leanback player permet de lire la plupart des formats vidéos / audio:

• H.264
• Ogg
• WebM
• MP3

Il n'utilise pas de flash pour lire les vidéos, mais directement la balise HTML5 video, permettant ainsi d'avoir une compatibilité mobile intéressante. C'est une bibliothèque javascript.

Intégrer LeanBack Player

Afin d'intégrer LeanBack Player à votre site internet vous devez télécharger les paquets suivants gratuitement si l'utilisation n'est pas commerciale. Vous devez ensuite decompresser les fichiers et ajouter les balises suivantes à l'entête de votre page:

<!-- first: the CSS layout of LeanBack Player -->
<link rel="stylesheet" type="text/css" href="./folder/leanbackPlayer.default.css"/>
 
<!-- second: the Javascript file of LeanBack Player -->
<script type="text/javascript" src="./folder/leanbackPlayer.pack.js"></script>
 
<!-- third: additional language files of LeanBack Player; -->
<!-- make sure you add at least the english translation ("en") -->
<script type="text/javascript" src="./folder/leanbackPlayer.en.js"></script>
<script type="text/javascript" src="./folder/leanbackPlayer.de.js"></script>

Vous devez faire attention a bien renseigner les balises sur le répertoire où vous avez mis les fichiers décompressés.

Intégration du contenu média

Afin d'intégrer les éléments HTML5 <video>, veuillez ajouter le contenu suivant à votre page:

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-video">
    <!-- HTML5 <video> element -->
    <video width="360" height="240" preload="metadata" controls poster="./folder/poster.jpg">
        <!-- HTML5 <video> sources -->
        <source src="./folder/video.webm" type='video/webm; codecs="vp8, vorbis"'/>
		<source src="./folder/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
        <source src="./folder/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    </video>
</div>

Pour les éléments de type video, vous devez ajouter "leanback-player-video" à l'attribut CSS-class de l'élément div environnant. Pour les éléments de type audio, vous devez remplacer "leanback-player-video" par "leanback-player-audio" à l'attribut CSS-class de l'élément div environnant.

Il est également conseillé de rajouter un attribut width (largeur) à l'élément div environnant pour qu'il corresponde à la mise en page de votre site.