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/MP4
• Ogg
• WebM
• MP3
• Ogv

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.

Multiple HTML5 <video> and <audio> elements on a single page

Il est possible de mettre plusieurs éléments média sur votre page, il faut simplement suivre le point intégration du contenu média pour chacun d'eux. Il faut néanmoins rester attentif sur le faut que tous les navigateurs ne supportent pas l'affichage de plusieurs éléments média sur la même page.

Générateur de code HTML

Il est possible d'utiliser la page suivante [1]afin de générer automatiquement tout le code nécessaire afin d'ajouter une vidéo à une page html.

Ajouter des sous-titres à votre vidéo

Grâce à la balise <track> il est possible d'ajouter des sous-titres à votre vidéo sur LeanBack Player. Il est possible de mettre plusieurs sous-titres en langues différentes. La version actuelle de LeanBack Player (0.8.0.93) permet d'utiliser les formats suivants pour les sous-titres:

• .srt Subtitle Format (WebSRT)
• .sbv Youtube Subtitle Format
• .vtt Web Video Text Tracks format (WebVTT)
• .xml Subtitles
• Subset of .ttml Subtitles (TTML)
• .sub Subtitles (VOBsub)

L'exemple ci-dessous montre comment ajouter les balises track contenant les sous-titres à la balise vidéo que nous avons vu plus haut.

<!-- 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 -->
    ...
    <!-- subtitle-references with <track>-element -->
    <track enabled="true" kind="subtitles" label="German" srclang="de" type="text/x-srt" 
        src="./folder/srt_example_de.srt"></track>
    <track enabled="true" kind="subtitles" label="English" srclang="en" type="text/plain" 
        src="./folder/sbv_example_en.sbv"></track>
    <track enabled="true" kind="subtitles" label="France" srclang="fr" type="text/plain" 
        src="./folder/sbv_example_fr.sbv"></track>
  </video>
</div>

Afin d'éviter des erreur liées aux balises track, il faut changer l'attribut type selon le format de sous-titre qui est utilisé.

• .srt: type="text/plain", type="text/x-srt"
• .sbv: type="application/x-subrip"
• .sub: type="application/vobsub"
• .vtt: type="text/vtt"
• .xml: type="application/xml"
• .ttml: type="application/ttaf+xml"

Liens Externes

Site de LeanBack Player: http://www.leanbackplayer.com/