« WebVTT » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(30 versions intermédiaires par 10 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
=Introduction=
==Introduction==
 
Le format WebVTT (des pistes de texte Web Video) est un format destiné à marquer les ressources de pistes externes de texte. La principale utilisation des fichiers WebVTT est le sous-titrage du contenu de vidéo ([http://dev.w3.org/html5/webvtt/ WebVTT], retr 23. Avril 2012). Un WebVTT comporte une liste de soi-disant queues qui peuvent être utilisées par un lecteur afin de superposer des informations sur la vidéo (par exemple des textes ou des graphiques) ainsi que pour la navigation.
Le format WebVTT (des pistes de texte Web Video) est un format destiné à marquer les ressources de pistes externes de texte. La principale utilisation des fichiers WebVTT est le sous-titrage du contenu de vidéo ([http://dev.w3.org/html5/webvtt/ WebVTT], retr 23. Avril 2012). Un WebVTT comporte une liste de soi-disant queues qui peuvent être utilisées par un lecteur afin de superposer des informations sur la vidéo (par exemple des textes ou des graphiques) ainsi que pour la navigation.


WebVTT peut être utilisé dans l'élément de piste de [http://edutechwiki.unige.ch/en/HTML5_audio_and_video HTML5 vidéo]. Différents fichiers de pistes peuvent être rattachés à une unique vidéo, par exemple différents fichiers de langues ou des fichiers de formats différents ou de types divers. En Avril 2012, les navigateurs prennent en charge ce format soit partiellement (comme Chrome), soit pas du tout, cependant certains lecteurs HTML5 à base de JavaScript mettent en œuvre différents sous-ensembles de WebVTT ou de normes concurrentes telles que le format SRT simple.
WebVTT peut être utilisé dans l'élément de piste <code>track</code> de [[HTML5 audio et video|vidéos HTML5 vidéo]]. Différents fichiers de pistes peuvent être rattachés à une unique vidéo, par exemple différents fichiers de langues ou de formats. Depuis 2012, les navigateurs prennent en charge ce format soit partiellement (comme Chrome), soit pas du tout, cependant il existe des lecteurs HTML5 à la base de JavaScript qui mettent en œuvre différents sous-ensembles de WebVTT ou de normes concurrentes, telles que le format SRT simple. En 2016, la situation s'est considérablement améliorée. Vous pouvez tester votre navigateur avec [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-htmltrack.html cet exemple simple].


Voir aussi:
Voir aussi:
*[http://edutechwiki.unige.ch/en/Timed_Text Timed Text] (TT ou TTML) est un format concurrent plus ancien à la base de XML que de fait nous préférons.
*[http://edutechwiki.unige.ch/en/Timed_Text Timed Text] (TT ou TTML) est un format concurrent plus ancien à la base de XML que de fait, nous préférons.
*[http://edutechwiki.unige.ch/en/HTML5_audio_and_video HTML5 audio et vidéo]
* [[HTML5 audio et video]]
*[http://edutechwiki.unige.ch/en/HTML5_audio_and_video HTML5 audio et vidéo] (anglais)
 
==Format==
Le format WebVTT est un format "texte intégral" assez complexe. Malgré cela, il n'utilise pas [http://edutechwiki.unige.ch/fr/XML XML]. Cependant, des parties de ses données (les contenus des indices ou "cue contents") peuvent inclure quelques balises semblables au XML.
Vous pouvez utiliser le bloc-notes pour modifier un fichier .vtt.


=Format=
===Structure du fichier===
Un fichier WebVTT a la structure suivante:
Un fichier WebVTT a la structure suivante:
*La première ligne doit contenir uniquement le mot "WEBVTT"  
*La première ligne doit contenir uniquement le mot "WEBVTT"  
*La deuxième ligne doit être vide  
*La deuxième ligne doit être vide  
*Autant de saisies de texte voulues, séparées par une ligne vide
*Autant de saisies de texte voulues, aussi nommées indices, séparées par une ligne vide
Voilà un exemple de saisie de texte:
De plus:
*Vous devez utiliser l'[http://edutechwiki.unige.ch/fr/Encodage_de_caract%C3%A8res encodage de caractères] UFT-8
*Les fichiers doivent être affichés comme text/vtt, par ex. additionner l'instruction suivante à un serveur Apache http.conf ou à un fichier htacess
AddType text/vtt .vtt
*Le retour à la ligne peut utiliser des caractères semblables à ceux de Windows ou Unix, par ex. \r \n ou \r \n. Cela signifie simplement que si vous voyez une nouvelle ligne dans l'éditeur de texte, alors vous faites les choses correctement.
*Les &amp;, &lt; et &gt; doivent être remplacées par &amp;amp;, &amp;lt;, et &amp;gt;
'''Exemple simple'''
 
Il fonctionne avec Chrome 18, mais vous devrez autoriser la piste(track) utilisant ''chrome://flags'' URI . Chercher ''"track"'', le bouton à activer.


nom ou numéro du sous-titre
Fichier de la piste(Track File):
temps de début --> temps de fin du sous-titre
texte du sous-titre
[ligne vide]
etc.


*(1)Un sous-titre: celui-ci ne peut pas inclure les éléments suivants: "-->" ou \r, \n, \r\n
<source lang="text">
*(2)Dans un fichier WebVTT, le format du temps qui est utilisé est le suivant : heures:minutes:secondes.millisecondes.
WEBVTT
*(3)Une ou plusieurs lignes de texte. Ce texte peut contenir des balises HTML comme: <br/>
Gras: &lt;b&gt; texte... &lt;/b&gt;<br/>
Italique: &lt;i&gt; texte... &lt;/i&gt;<br/>
Souligner:&lt;u&gt; texte... &lt;/u&gt; <br/>
Pour un texte avec plusieurs lignes:  &lt;p&gt; texte... &lt;/p&gt;&lt;p&gt; texte... &lt;/p&gt;
*(4)ligne vide


==Structure du fichier==
Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia est un grande aventure. Il peut avoir ses défauts, mais c'est le plus grand effort collectif de construction de connaissances


WEBVTT<br />
Disclaimer
1
00:01:10.000 --> 00:02:10.000
00:00:00.000 --> 00:00:10.000
C'est juste une piste de démo utilisant VTT
Exemple de sous-titre<br />
</source>
2
00:00:10.500 --> 00:01:10.500
Exemple d'un deuxième sous-titre


=WebVTT dans HTML5=
Comme vous pouvez le voir, il y a une en-tête "WEBVTT" et les indices sont séparés par des lignes blanches. Nous expliquerons la syntaxe de ces indices ci-dessous.
 
'''WebVTT dans HTML5'''


La balise <track> de HTML5 permet d'insérer les sous-titres au format WebVTT à une vidéo affichée avec la balise <video>. Cette balise est normalement prise en charge par l'ensemble des navigateurs Internet.
La balise <track> de HTML5 permet d'insérer les sous-titres au format WebVTT à une vidéo affichée avec la balise <video>. Cette balise est normalement prise en charge par l'ensemble des navigateurs Internet.
Lire l'article [[HTML5 audio and video]] pour plus de détails


<source lang="XML">
<source lang="XML">
Ligne 54 : Ligne 61 :
</video>
</video>
</source>
</source>
N.B. : si on laisse "default" dans la ligne des sous-titres, dans la vidéo ils seront toujours affichés ; si le player prévoit l'option on/off (par exemple, [http://www.leanbackplayer.com/player_download.html?type=player LeanBack Player]) il faut enlever "default" pour que l'utilisateur puisse choisir s'il faut afficher, ou pas, les sous-titres.
Exemples de fichiers:
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html (ATTENTION : l'exemple n'est pas validé par le W3C!)
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
=== Validation W3C ===
Les exemples donnés sur EduTechWiki FR et EN ne semblent pas valides lors de la validation par le W3C. La solution est d'utiliser kind="captions" à la place de kind="subtitles".
=== Indices simples ===
Les indices ont grossièrement la structure suivante :
; (1) Un sous-titre
: celui-ci ne peut pas inclure les éléments suivants: "-->" ou \r, \n, \r, \n
; (2) Une ligne pour le '''timing''' et des instructions optionnelles, c'est-à-dire les paramètres des indices
: '''heure de départ --> heure d'arrivée [paramètres des indices]'''
: utiliser le format ''hh:mm:ss.mmm'' ou plus court ''mm:ss.mmm''. Noter les deux points ":" et le point "."
: Suivi éventuellement des instructions optionnelles
: Exemples de lignes de "timing"
00:00:01.000 --> 00:01:01.017
00:01.000 --> 01:01.017
00:00:01.000 --> 00:01:01.017 T:50%
; (3) Une ou plusieurs lignes de texte
: Le texte qui doit être affiché. Ce texte peut contenir des balises HTML comme:
: ''Voice'': &lt;v voice name&gt; permet de définir une voix (nom de la personne qui parle)
: ''CSS class'': &lt;c.classname&gt; texte ...&lt;/c&gt; ceci tient compte d'un style CSS flexible défini dans le HTML
: ''Gras'': &lt;b&gt; texte... &lt;/b&gt;<br />
: ''Italique'': &lt;i&gt; texte... &lt;/i&gt;<br />
: ''Souligner'':&lt;u&gt; texte... &lt;/u&gt; <br />
: U''n texte avec plusieurs lignes'': &lt;p&gt; texte... &lt;/p&gt;&lt;p&gt; texte... &lt;/p&gt;
; (4) Une '''ligne vide'''


Exemple de saisie de texte simple :
<source lang="text">
WEBVTT
1
00:00:00.000 --> 00:00:10.000
Ceci est une <b>très courte</b> video qui ne parle pas de WEBVTT
</source>
[[en:WebVTT]]
[[en:WebVTT]]


== Outils ==
=== Formatage avancé ===
 
On peut changer le positionnement dans la ligne timing. Par contre, en 2016, cette fonctionnalité ne semble pas être très bien implémentée.
 
'''Position verticale / ligne'''
: line:5 .... ligne 5
: line:30% .... tiers supérieur
 
'''Alignement horizontal'''
: align:start
: align:middle
: align:end
 
'''Position horizontale'''
: position:20%
 
'''Taille'''
: size:50% .... 50% de la largeur
 
'''Vertical text'''
: vertical:rl ... de haut en bas, droite vers la gauche
: vertical:lr ... gauche vers la droite
 
Example:
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-positions.html
<source lang="dos">
WEBVTT
 
Introduction
00:00:01.000 --> 00:01:10.000 size:90% line:10%
<p>Wikipedia is a great adventure.</p>
<p>It may have its shortcomings,</p>
<p>but it is the largest collective knowledge construction endevour</p>
 
Disclaimer
00:00:10.000 --> 00:02:10.000 vertical:rt
This is just a track demo using VTT
</source>
 
Voir [[:en:WebVTT]] pour quelques possibilités supplémentaires
 
== Interfaces VTTCue <ref>[https://developer.mozilla.org/fr/docs/Web/API/Web_Video_Text_Tracks_Format#Interfaces Interfaces VTTCue]</ref>==
 
Rappelons qu'un indice (ou cue) est une bloc qui se compose de cinq éléments:
* L’ identifiant du Cue.
* Le timing du Cue.
* Les paramètres de Cue.
* Une ou plusieurs lignes.
* Le texte à afficher.
 
Il existe deux interfaces API webvtt utilisées dans webvtt qui sont:
 
===  VTTCue ===
 
La première interface est utilisée pour fournir une interface API dans le Document Object Model, où les différents attributs pris en charge par celui-ci peuvent être utilisés pour préparer et modifier les indices de plusieurs manières.


* [http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/ HTML5 Video Caption Maker] (online service, Microsoft)
Le premier point de départ de la Cue est le constructor qui est définie en utilisant la VTTCue constructeur par défaut en ajustant les  startTime, endTime, texte. Maintenant, on définit la région de vttcue  particulière à laquelle ce signal appartient en utilisant cue.region.
lineAlign(Vertical, horizontal, ligne,), positionAlign(Position), le texte, sont utilisés pour modifier la queue.
On peut modifier la forme et le style des objets en HTML en utilisant le fichier de style CSS.
 
===  VTT Region ===


==Réferences==
La deuxième interface est utilisée pour définir un nouvel objet VTTRegion. Il y a plusieurs propriétés de VTTRegion telles que


Traduction de l'article [http://edutechwiki.unige.ch/en/WebVTT WebVTT]
la largeur et les lignes, Le scroll, le RegionAnchorX et le RegionAnchorY et le viewportAnchorX et le viewportAnchorY.


[[Catégorie: Technologies web]]
== Exemples d'utilisation WebVTT ==


= Exemples =
Simple exemple 1 (extrait du projet de spécification)
Simple exemple 1 (extrait du projet de spécification)


  WEBVTT
  WEBVTT
  00:11.000 --> 00:13.000
  00:11.000 --> 00:13.000
  <v Roger Bingham>Nous sommes dans la ville New York
  <v Roger Bingham>We are in New York City
   
   
  00:13.000 --> 00:16.000
  00:13.000 --> 00:16.000
  <v Roger Bingham>Nous sommes actuellement à l'Hôtel de Lucerne, juste en bas de la rue
  <v Roger Bingham>We're actually at the Lucern Hotel, just down the street


Simple exemple utilisant le lecteur Leanback avec des sous-titres.
Simple exemple utilisant le lecteur Leanback
<source lang="XML">
<source lang="XML">
<div class="leanback-player-video">
<div class="leanback-player-video">
Ligne 115 : Ligne 228 :
</source>
</source>


Une page d'exemple utilisant le lecteur Leanback avec des sous-titres :
Une page d'exemple utilisant le lecteur Leanback :
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html


Fichiers "Track":
Une page en HTML5 "pur":
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-htmltrack.html
 
Fichiers vtt pour la balise "Track":
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.srt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.srt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt
* http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt


Comme vous pouvez le voir ce lecteur s'appuie sur un balisage supplémentaire:
Comme vous pouvez le voir, ce lecteur s'appuie sur un balisage supplémentaire:
* Un div d'emballage de class = "Leanback lecteur-vidéo"
* Un div d'emballage de class = "Leanback lecteur-vidéo"
* Deux attributs supplémentaires concernant track (illégaux mais inoffensifs) : enabled = "true" et type = "....". Cependant, nous ne avons pas testé ce qui se passe si ceux-ci sont omises.  
* Deux attributs supplémentaires concernant track (illégaux mais inoffensifs) : enabled = "true" et type = "....". Cependant, nous n'avons pas testé ce qui se passe si ceux-ci sont omis.  
Peut-être l'activation n'est pas nécessaire car elle peut être configuré dans le Javascript et le type n'est peut-être pas nécessaire pour des tests en local
Peut-être l'activation n'est pas nécessaire, car elle peut être configurée dans le Javascript et le type n'est peut-être pas nécessaire pour des tests en local.
 
== Références et liens ==
 
=== Cités ===
 
<references />
 
=== Outils ===
 
* [http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/ HTML5 Video Caption Maker] (online service, Microsoft)
 
=== Standards ===
 
* [http://www.w3.org/TR/webvtt1/ WebVTT: The Web Video Text Tracks Format], W3C First Public Working Draft 13 November 2014
 
* [https://w3c.github.io/webvtt/ WebVTT: The Web Video Text Tracks Format], Draft Community Group Report, 24 October 2015.


==Réferences==
* [http://www.webvtt.org/ WebVTT support in browsers] (2 oct. 2014, lors de notre visite le 22 oct 2015).


Traduction de l'article [http://edutechwiki.unige.ch/en/WebVTT WebVTT]
 
[[en:WebVTT]]
]
 
[[Catégorie: Technologies web]]

Version du 2 décembre 2018 à 21:46

Introduction

Le format WebVTT (des pistes de texte Web Video) est un format destiné à marquer les ressources de pistes externes de texte. La principale utilisation des fichiers WebVTT est le sous-titrage du contenu de vidéo (WebVTT, retr 23. Avril 2012). Un WebVTT comporte une liste de soi-disant queues qui peuvent être utilisées par un lecteur afin de superposer des informations sur la vidéo (par exemple des textes ou des graphiques) ainsi que pour la navigation.

WebVTT peut être utilisé dans l'élément de piste track de vidéos HTML5 vidéo. Différents fichiers de pistes peuvent être rattachés à une unique vidéo, par exemple différents fichiers de langues ou de formats. Depuis 2012, les navigateurs prennent en charge ce format soit partiellement (comme Chrome), soit pas du tout, cependant il existe des lecteurs HTML5 à la base de JavaScript qui mettent en œuvre différents sous-ensembles de WebVTT ou de normes concurrentes, telles que le format SRT simple. En 2016, la situation s'est considérablement améliorée. Vous pouvez tester votre navigateur avec cet exemple simple.

Voir aussi:

Format

Le format WebVTT est un format "texte intégral" assez complexe. Malgré cela, il n'utilise pas XML. Cependant, des parties de ses données (les contenus des indices ou "cue contents") peuvent inclure quelques balises semblables au XML. Vous pouvez utiliser le bloc-notes pour modifier un fichier .vtt.

Structure du fichier

Un fichier WebVTT a la structure suivante:

  • La première ligne doit contenir uniquement le mot "WEBVTT"
  • La deuxième ligne doit être vide
  • Autant de saisies de texte voulues, aussi nommées indices, séparées par une ligne vide

De plus:

  • Vous devez utiliser l'encodage de caractères UFT-8
  • Les fichiers doivent être affichés comme text/vtt, par ex. additionner l'instruction suivante à un serveur Apache http.conf ou à un fichier htacess
AddType text/vtt .vtt
  • Le retour à la ligne peut utiliser des caractères semblables à ceux de Windows ou Unix, par ex. \r \n ou \r \n. Cela signifie simplement que si vous voyez une nouvelle ligne dans l'éditeur de texte, alors vous faites les choses correctement.
  • Les &, < et > doivent être remplacées par &amp;, &lt;, et &gt;

Exemple simple

Il fonctionne avec Chrome 18, mais vous devrez autoriser la piste(track) utilisant chrome://flags URI . Chercher "track", le bouton à activer.

Fichier de la piste(Track File):

WEBVTT

Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia est un grande aventure. Il peut avoir ses défauts, mais c'est le plus grand effort collectif de construction de connaissances

Disclaimer
00:01:10.000 --> 00:02:10.000
C'est juste une piste de démo utilisant VTT

Comme vous pouvez le voir, il y a une en-tête "WEBVTT" et les indices sont séparés par des lignes blanches. Nous expliquerons la syntaxe de ces indices ci-dessous.

WebVTT dans HTML5

La balise <track> de HTML5 permet d'insérer les sous-titres au format WebVTT à une vidéo affichée avec la balise <video>. Cette balise est normalement prise en charge par l'ensemble des navigateurs Internet.

Lire l'article HTML5 audio and video pour plus de détails

<video id="movie1" controls preload="metadata">
 <source src="videos/state-of-wikipedia-480x272.mp4"/>
 <source src="videos/state-of-wikipedia-480x272.ogv"/>
 <source src="videos/state-of-wikipedia-480x272.webm"/>
 <track kind="subtitles" label="EN subtitles" src="subtitles_en.vtt" srclang="en" default/>   
 <track kind="subtitles" label="Soustitre en FR" src="subtitles_fr.vtt" srclang="fr"/>
        Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

N.B. : si on laisse "default" dans la ligne des sous-titres, dans la vidéo ils seront toujours affichés ; si le player prévoit l'option on/off (par exemple, LeanBack Player) il faut enlever "default" pour que l'utilisateur puisse choisir s'il faut afficher, ou pas, les sous-titres.

Exemples de fichiers:

Validation W3C

Les exemples donnés sur EduTechWiki FR et EN ne semblent pas valides lors de la validation par le W3C. La solution est d'utiliser kind="captions" à la place de kind="subtitles".

Indices simples

Les indices ont grossièrement la structure suivante :

(1) Un sous-titre
celui-ci ne peut pas inclure les éléments suivants: "-->" ou \r, \n, \r, \n
(2) Une ligne pour le timing et des instructions optionnelles, c'est-à-dire les paramètres des indices
heure de départ --> heure d'arrivée [paramètres des indices]
utiliser le format hh:mm:ss.mmm ou plus court mm:ss.mmm. Noter les deux points ":" et le point "."
Suivi éventuellement des instructions optionnelles
Exemples de lignes de "timing"
00:00:01.000 --> 00:01:01.017
00:01.000 --> 01:01.017
00:00:01.000 --> 00:01:01.017 T:50%
(3) Une ou plusieurs lignes de texte
Le texte qui doit être affiché. Ce texte peut contenir des balises HTML comme:
Voice: <v voice name> permet de définir une voix (nom de la personne qui parle)
CSS class: <c.classname> texte ...</c> ceci tient compte d'un style CSS flexible défini dans le HTML
Gras: <b> texte... </b>
Italique: <i> texte... </i>
Souligner:<u> texte... </u>
Un texte avec plusieurs lignes: <p> texte... </p><p> texte... </p>
(4) Une ligne vide

Exemple de saisie de texte simple :

WEBVTT

1
00:00:00.000 --> 00:00:10.000
Ceci est une <b>très courte</b> video qui ne parle pas de WEBVTT

Formatage avancé

On peut changer le positionnement dans la ligne timing. Par contre, en 2016, cette fonctionnalité ne semble pas être très bien implémentée.

Position verticale / ligne

line:5 .... ligne 5
line:30% .... tiers supérieur

Alignement horizontal

align:start
align:middle
align:end

Position horizontale

position:20%

Taille

size:50% .... 50% de la largeur

Vertical text

vertical:rl ... de haut en bas, droite vers la gauche
vertical:lr ... gauche vers la droite

Example:

WEBVTT

Introduction
00:00:01.000 --> 00:01:10.000 size:90% line:10%
<p>Wikipedia is a great adventure.</p>
<p>It may have its shortcomings,</p>
<p>but it is the largest collective knowledge construction endevour</p>

Disclaimer
00:00:10.000 --> 00:02:10.000 vertical:rt
This is just a track demo using VTT

Voir en:WebVTT pour quelques possibilités supplémentaires

Interfaces VTTCue [1]

Rappelons qu'un indice (ou cue) est une bloc qui se compose de cinq éléments:

  • L’ identifiant du Cue.
  • Le timing du Cue.
  • Les paramètres de Cue.
  • Une ou plusieurs lignes.
  • Le texte à afficher.

Il existe deux interfaces API webvtt utilisées dans webvtt qui sont:

VTTCue

La première interface est utilisée pour fournir une interface API dans le Document Object Model, où les différents attributs pris en charge par celui-ci peuvent être utilisés pour préparer et modifier les indices de plusieurs manières.

Le premier point de départ de la Cue est le constructor qui est définie en utilisant la VTTCue constructeur par défaut en ajustant les startTime, endTime, texte. Maintenant, on définit la région de vttcue particulière à laquelle ce signal appartient en utilisant cue.region. lineAlign(Vertical, horizontal, ligne,), positionAlign(Position), le texte, sont utilisés pour modifier la queue. On peut modifier la forme et le style des objets en HTML en utilisant le fichier de style CSS.

VTT Region

La deuxième interface est utilisée pour définir un nouvel objet VTTRegion. Il y a plusieurs propriétés de VTTRegion telles que

la largeur et les lignes, Le scroll, le RegionAnchorX et le RegionAnchorY et le viewportAnchorX et le viewportAnchorY.

Exemples d'utilisation WebVTT

Simple exemple 1 (extrait du projet de spécification)

WEBVTT
00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City

00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

Simple exemple utilisant le lecteur Leanback

<div class="leanback-player-video">
  <video controls="controls" preload="metadata" poster="wikipedialogo.png" width="480" height="272">
   <source src="videos/state-of-wikipedia-480x272.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="videos/state-of-wikipedia-480x272.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="videos/state-of-wikipedia-480x272.ogv" type='video/ogg; codecs="theora, vorbis"' />
 
   <track enabled="true" kind="subtitles" label="EN"
          src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
   <track enabled="true" kind="subtitles" label="EN VTT"
          src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
   <track enabled="true" kind="subtitles" label="FR" 
          src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
   <object class="leanback-player-flash-fallback" width="640" height="360"
           type="application/x-shockwave-flash"
           data="http://releases.flowplayer.org/swf/flowplayer.swf">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer.swf" />
      <param name="allowFullScreen" value="true" />
      <param name="wmode" value="opaque" />
      <param name="bgcolor" value="#000000" />
      <param name="flashVars" 
             value="config={'playlist':['wikipedialogo.png', 
		{'url':'videos/state-of-wikipedia-480x272.mp4','autoPlay':false,'autobuffering':false}]}" />
   </object>
   <div class="leanback-player-html-fallback" style="width: 640px; height: 360px;">
     <img src="wikipedialogo.png" width="640" height="360" alt="Poster Image" 
          title="No HTML5-Video playback capabilities found. Please download the video(s) below." />
    <div>
<strong>Download Video:</strong>
   <a href="videos/state-of-wikipedia-480x272.mp4">.mp4</a>
   <a href="videos/state-of-wikipedia-480x272.webm">.webm</a>
   <a href="videos/state-of-wikipedia-480x272.ogv">.ogv</a>
 </div>
</div>
</div>

Une page d'exemple utilisant le lecteur Leanback  :

Une page en HTML5 "pur":

Fichiers vtt pour la balise "Track":

Comme vous pouvez le voir, ce lecteur s'appuie sur un balisage supplémentaire:

  • Un div d'emballage de class = "Leanback lecteur-vidéo"
  • Deux attributs supplémentaires concernant track (illégaux mais inoffensifs) : enabled = "true" et type = "....". Cependant, nous n'avons pas testé ce qui se passe si ceux-ci sont omis.

Peut-être l'activation n'est pas nécessaire, car elle peut être configurée dans le Javascript et le type n'est peut-être pas nécessaire pour des tests en local.

Références et liens

Cités

Outils

Standards

]