Fiche Javascript : Audio et Vidéo en HTML5

Objet de la fiche :

État de la fiche

Plan de la fiche :

| Avant propos |
| Méthodes, propriétés, évènements |
| Types mime audio et vidéo |
| Un lecteur audio en javascript |
| Un lecteur vidéo en javascript |
| Soustitrer le média |
| Application au projet de site Web |

Avant propos :

Méthodes, propriétés, évènements

Les méthodes

Méthodes	Paramètres	Descriptions
addTextTrack()		Ajoute un nouveau texte synchronisé au média.
canPlayType()	Le type MIME du média que l'on veut tester et éventuellement les codecs associés. Exp : canPlayType("audio/mp3"), ou canPlayType("video/webm;codecs='VP8, vorbis'")	Teste si le navigateur est capable de jouer le type de média spécifié. En réponse on dispose de l'une des trois informations suivantes : "probably" : il trés problable que le média soit supporté. "maybe" : il est fort possible que le média soit supporté. "" : une chaine vide lorsque le média n'est pas supporté
canPlayType()	La différence entre "maybe" et "probably" provient bien souvent du fait que la méthode canPlayType ne dispose pas de suffisamment d’informations. Par exemple, si le paramètre codecs est manquant, la méthode peut retourner "maybe" pour la prise en charge du format mp4. Cela signifie qu’il existe peut-être des codecs mp4 qui ne sont pas pris en charge. Le paramètre codecs restreint la prise en charge à une version plus spécifique des fichiers mp4. Cette imprécision des trois états retournés par la méthode canPlayType peut compliquer la situation lorsque vous voulez déterminer si un navigateur prend en charge le format de fichier. Bien que cela ne soit pas une règle établie, si un navigateur retourne "maybe", cela signifie souvent qu’il peut prendre en charge le format de fichier.
load()		Permet de charger dynamiquement le fichier source du média.
play()		Lance la lecture du média.
pause()		Arrêt temporaire de la lecture du média.

Remarques : les méthodes identifiées en vert sont utilisées dans des exemples concrets.

Les propriétés

Propriétés	Descriptions
audioTracks	Retoune l'objet AudioTrackList Object qui représente les traks audio disponibles.
autoplay (Note¹)	Défini si la lecture du média démarre automatiquement ou non dès qu'il est chargé : autoplay="true" ou "false".
buffered	Retourne un objet (TimeRanges object ³) contenant des intervalles de temps relatifs aux parties du média mises en mémoire (buffered parts) durant les phases de chargement ou de lecture. Cette information est souvent utilisée pour visualiser la progression du chargement du média.
controller	Returns the MediaController object representing the current media controller of the audio/video
controls	Sets or returns if the audio/video should display controls (like play/pause etc.). Ces controles peuvent aussi être activer ou désactiver dynamiquement à partir d'un click droit sur la vidéo.
crossOrigin	Sets or returns the CORS settings of the audio/video
currentSrc	Returns the URL of the current audio/video
currentTime	Retourne ou modifie l'avancement actuel de la lecture du média (en secondes)
defaultMuted	Sets or returns if the audio/video is muted by default
defaultPlaybackRate	Sets or returns the default speed of the audio/video playback
duration	Renvoi en secondes la durée du média.
ended	Informe si la lecture du média est terminée (true) ou non (false)
error	Si une erreur survient, renvoi l'erreur de l'objet média.
loop	Lecture en boucle du média : loop="loop".
mediaGroup	Retourne ou modifie le groupe de médias appartenant à ce groupe. Un mediaGroup authorise 2 ou plusieurs audio/video à être synchronisés ensemble.
muted	Retourne ou modifie le niveau sonore du
networkState	Returns the current network state of the audio/video.The other values for networkState are 1, NETWORK_IDLE, which means the browser has chosen a video to use but isn't downloading anything; 2, NETWORK_LOADING, which means the browser is trying to download data; and 3, NETWORK_NO_SOURCE, which means no source has been successfully loaded yet.
paused	Etat du média en cours : en pause ou pas.
playbackRate	Retourne ou modifie la vitesse de lecture du média
played	Retourne un objet (TimeRanges object ³) contenant des intervalles de temps relatifs aux parties du média déjà joué.
preload (Note²)	Activation du type de préchargement du média
readyState	Returns the current ready state of the audio/video
seekable	Retourne un objet TimeRanges précisant les zônes ou le déplacement du point de lecture est autorisé
seeking	Retourne si l'utilisateur est en train de modifier le point de lecture (forward ou backward).
src	Retourne ou initialise la source du média.
startDate	Returns a Date object representing the current time offset
textTracks	Returne l'objet TextTrackList représentant the available text tracks
videoTracks	Returns a VideoTrackList object representing the available video tracks
volume	Retourne ou modifie dynamiquement le contrôle du volume.

Note¹ Particularité de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls) pour afficher les possibilités de contrôle de la vidéo. Ceci est valable pour tous les attributs (autoplay, etc.).

Note²

preload = 'auto' : le média est préchargé automatiquement. Idéalement il peut être chargé complètement avant que l'on commence la lecture.
preload = 'metadata' : Au chargement on préviligie l'acquisition des données de type metadata(dimensions, first frame, track list, durée, et autres).
preload ou preload = '' : l'attribut preload est spécifié mais sans valeur attribuée. Cela est équivalent à preload = “auto”.
pas d'attribut preload ou preload = 'none' : aucune donnée n'est bufferisée.

Note³ timerange

L'objet TimeRanges est une liste des différentes périodes de temps avec comme information le début et la fin de chaque période. Chaque période est identifiée via son index

Cet objet possède les propriétés suivantes :

length : nombre de périodes disponibles.
start(index) : départ (en secondes) de la période référencée par index
end(index) : arrêt (en secondes) de la période référencée par index

Exp avec la propriété played : 20 secondes aprés le début de lecture d'un média (d'une durée de 1mn 30), on décide de lire plus en avant de 60 secondes et ce jusqu'à la fin totale du média. Dans cette configation, en fin de lecture, 2 périodes sont générées

audio.played.length donnera 2,
audio.played.start(0) returns 0,
audio.played.end(0) returns 20,
audio.played.start(1) returns 60,
audio.played.end(1) returns 90.

Les évènements

Evènements	Descriptions
abort	Généré lorsque le média est abandonné.
canplay	Généré lorsque les données reçues sont suffisantes et que le média est prêt à la lecture.
canplaythrough	Généré lorsque le navigateur estime qu'il peut lire le média sans avoir à s'arréter pour bufferiser les données.
durationchange	Généré lorque la valeur de la propriété duration change. Lorsque le média est chargé la valeur de la propriété duration change de "NaN" à la valeur du temps en cours de la lecture.
emptied	Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode load() pour le recharger.
ended	Fin du média atteinte, et l'élément <video> ou <audio> n'est pas défini sur loop ou n'est pas joué à l'envers. Exp : MonPlayer.addEventListener('ended',Ma Fonction, false);
error	Généré lorsque une erreur survient MonPlayer.addEventListener('error', function(e){Event_errMessage(e);}, true); function Event_errMessage(e){ try{ switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: alert('Lecture du media interrompu.'); break; case e.target.error.MEDIA_ERR_NETWORK: alert('Problèmes réseau.'); break; case e.target.error.MEDIA_ERR_DECODE: alert("Données corompues ou fonctionnalités non supportées."); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert("Pas de chargement : problèmes serveur, réseau, ou format non supporté."); break; default: alert('Interruption média : Erreur non reconnue.'); break; } } catch(e){alert("Erreur media ");} }
loadeddata	Le navigateur a suffisamment chargé de données vidéo pour débuter la lecture à la position actuelle.
loadedmetadata	Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.
loadstart	Généré dés que le chargement du média débute.
pause	Généré lorsque le média passe en pause.
play	Généré lorsque la lecture débute, ou aprés ré-initialisation.
playing	Généré lorsque le média est prête à la lecture aprés avoir été arrété ou mis en pause pour bufferisation de données.
progress	Généré périodiquement pour informer sur l'état de chargement du média.
ratechange	Généré si la vitesse de lecture change.
seeked	Envoyé lorsqu'une opération de positionnement est effectuée.
seeking	Envoyé lorsqu'une opération de positionnement débute.
stalled	Généré lorsque le navigateur tente d'obtenir des données non disponibles.
suspend	Généré lorsque le chargement du média est suspendu.
timeupdate	La position actuelle de la lecture a changé parce que le film est en cours de lecture, un script l'a changée, ou l'utilisateur a décidé d'accéder à une séquence différente dans la vidéo.
volumechange	Généré losque le niveau de volume change.
waiting	Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).

Remarque : Lors du processus de chargement du média, les évènements suivant arrivent dans cet ordre :

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Types mime audio et vidéo

Le type MIME (ou encore MIME ou Content-type2), est un identifiant de format de données sur internet.

Audio

Types mime	Extensions	Codecs
audio/aac	.aac
audio/mp4	.mp4 .m4a	AAC: mp4a.40.2
audio/mpeg	.mp1 .mp2 .mp3 .mpg .mpeg
audio/ogg Note¹	.oga	vorbis speex, flac
audio/wav	.wav
audio/webm	.webm	vorbis

Vidéo

Types mime	Extensions	Codecs
video/mp4	.mp4	H.264 Baseline Profile (BP): avc1.42E0xx, ou xx est le niveau AVC. A l'origine pour des applications low-cost avec des ressources (processeurs, mémoires) limitées. Ce profil est largement utilisé en vidéoconférence ou des applications mobiles. H.264 Main Profile (MP): avc1.4D40xx, ou xx est le niveau AVC. À l'origine destiné comme un profil grand public pour des applications de stockage. L'importance de ce profil s'est effacée quand le High Profile a été développé pour ces types d'applications. H.264 High Profile (HP): avc1.6400xx, ou xx est le niveau AVC. Applications de brodcast, de stockage, télévision haute définition (HD DVD, Blu-ray). MPEG-4 Visual Simple Profile Level 0: mp4v.20.9 MPEG-4 Visual Advanced Simple Profile Level 0: mp4v.20.240
video/oggNote¹	.ogg, .ogv	theora, dirac
video/webm	.webm	vp8, vp8.0

Exemple

audio/ogg; codecs=vorbis
video/webm; codecs="vp8, vorbis"
video/mp4; codecs="avc1.58A01E, mp4a.40.2"

Note¹

ogg : conteneur audio/video
ogv : video uniquement
oga : audio uniquement

L'appellation ogg pour les fichiers audio est un abus de langage.

Un lecteur audio en javascript

Lecteur simple

Lecteur original

Cette partie donne les clés pour construire un lecteur personnalisé en javascript, dont l'image ci-dessous donne un aperçu du résultat final.

L'originalité de ce lecteur se situe au niveau d'un affichage type sound meter et de l'utilisation de canvas pour afficher des informations de manière circulaire.

window.requestAnimationFrame

window.AudioContext

L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un AudioNode. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.

Un lecteur vidéo en javascript

Ce chapître donne les clés pour construire un lecteur personnalisé en javascript, dont l'image ci-dessous donne un aperçu du résultat final.

Etape 1 : structure de base

<!DOCTYPE html><html> 
												<head>
												<meta charset="utf8" />
												<title>Vidéo</title>
												<style type="text/css">
													#stage{padding:10px}
												</style>
												<script type="text/javascript">
												<!--
													// Démarrage de la vidéo
													function videoInit(idVideo,srcVideo) {
														var v = document.getElementById(idVideo);
														var canPlayVideo = canPlay(v);
														if(!canPlayVideo.resultat) {alert("Votre navigateur n'est pas en mesure de lire ce média");return;}
														v.type = canPlayVideo.videoType;
														v.src = srcVideo + canPlayVideo.videoExt;
														v.width = 550;
														v.height = 320;
														
														document.getElementById("stage").style.display="block";
														document.getElementById("info").innerHTML = v.src;
													}

// Test des possibilités du navigateur
													function canPlay(_v){  
														try{  
															if(!_v.canPlayType("video/ogg").match(/maybe|probably/i)) {  
																if(!_v.canPlayType("video/mp4").match(/maybe|probably/i)) {  
																	return {"resultat" : false, "videoType" : "", "videoExt" : ""};  
																}  
																else return {"resultat" : true, "videoType" : "video/mp4", "videoExt" : ".mp4"};  
															}  
																else return {"resultat" : true, "videoType" : "video/ogg; codecs='theora, vorbis'", "videoExt" : ".ogg"};  
														}  
														catch (z) {return {"resultat" : false, "videoType" : "", "videoExt" : ""}; }  
													}

// Gestion erreur média
													function video_erreur(e){
														try{
															switch (e.target.error.code) {
																case e.target.error.MEDIA_ERR_ABORTED:
																	alert('Lecture du media interrompu.');	break;
																case e.target.error.MEDIA_ERR_NETWORK:
																	alert('Interruption média : problèmes réseau.'); break;
																case e.target.error.MEDIA_ERR_DECODE:
																	alert('Interruption média : corruption des données transférées ou fonctionnalités non supportée par le navigateur.');	break;
																case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
																	alert('Interruption média : le média ne peut être chargé (problèmes serveur ou réseau, format non supporté.');	break;
																default:	alert('Interruption média : Erreur non reconnue.');	break;
															}
														}
														catch(z){alert("video_erreur " + z);}
													}
												//-->
												</script>
												</head>
												<body onload="videoInit('currentVideo','http://monwebfacile.free.fr/Tutoriaux/Javascript/AudioVideo/HTML5video')">
													<div id="site">
														<div style="width:500px;margin:auto;padding-top:20px">
															<video id='currentVideo'  onerror = 'video_erreur(e)'>
																<p>Votre navigateur ne supporte pas la balise vidéo de HTML5</p>    
															</video>
														</div>
														<div id='info' style='text-align:center'></div> 
													</div>
												</body>
												</html>

L'étape 1 consiste en la déclaration d'une commande de démarrage automatique (body onload()) via la fonction startVideo() et de la balise vidéo identifiée par id='currentVideo'. La balise vidéo est réduite à son strict minimum avec toutefois un évènement (onerror()) de gestions des erreurs de lecture du média. Tous les paramètres ou commandes seront initialisés via du javascript.
videoInit requiert 2 paramètres : la référence de la vidéo ("idVideo") et le nom du fichier vidéo sans extension.
La fonction videoInit va faire appel à la fonction canPlay() qui va utiliser la méthode canPlayType() pour savoir quel type de média le navigateur est capable de jouer.
En réponse de canPlay() on va pouvoir initialiser le type et l'extension du média.

Etape 2 : commander le lecteur

Les déclarations HTML pour les boutons de commande.

Complément HTML de la balise <video>.

Les déclarations CSS pour les boutons de commande.

Les fonctions javascript en réponse aux évènements onclick des boutons.

function restart(idVideo) {	// Redémarrage du média
													try{document.getElementById(idVideo).currentTime = 0;}
													catch(z) {alert("restart " + z);}
												}

Il n'y a pas grand chose à dire sur l'étape 2. Les boutons sont des déclarations classiques de div en ligne, contenant une image représentative de la fonction à exécuter avec déclenchement de l'évènement sur onclick(). Les méthodes ou propriétés utilisées font partie de celles décrites dans la partie précédente.
Il a été rajouté un évènement onclick() sur la vidéo elle même, pour permettre de démarrer ou d'arrêter la lecture directement à partir d'un click sur la vidéo.

Etape 3 : afficher une barre de progression

Les déclarations HTML dans la partie body (entre la commande play et la commande rewind).

Les déclarations CSS dans la partie style de head.

Les fonctions javascript dans la partie script de head.

function converSeconde(oTime) {
													var reste=oTime;
													var result='';
											 
													var nbJours=Math.floor(reste/(3600*24)); reste -= nbJours*24*3600;
													var nbHours=Math.floor(reste/3600);	reste -= nbHours*3600;
													var nbMinutes=Math.floor(reste/60);	reste -= nbMinutes*60;
													var nbSeconds=reste;
											 
													if (nbJours>0)	result=result+nbJours+':';
													if (nbHours>0)	result=result+nbHours+':';
													if (nbMinutes>0) result=result+nbMinutes+':';
													if (nbSeconds>0) result=result+nbSeconds+''; 
													return result;
												}
												
												function getPosition(obj)  
												{  
													var xA=0,yA=0;
													var xR=0,yR=0;

var _offsetX= document.documentElement  ? document.documentElement.scrollLeft : window.pageXOffset;  
													var _offsetY= document.documentElement  ? document.documentElement.scrollTop : window.pageYOffset;

while (obj!=null){
														xA += obj.offsetLeft;
														yA += obj.offsetTop;
														
														xR += obj.offsetLeft - _offsetX;
														yR += obj.offsetTop-_offsetY;

obj=obj.offsetParent;
													}

return {"xA" : xA, "yA" : yA, "xR" : xR, "yR" : yR};  
												}

Les déclencheurs d'évènement pour la mise à jour de la barre de progression à mettre en fin de la partie body.

progressBar()

La progression est affichée dans un élément canvas (#canvas). Les informations associées (Chargement, En attente, Lecture terminée) sont disponibles dans une boite div (#infoTelechargement). L'ensemble barre de progression et informations est regroupé dans un div.
Les informations sont données par les propriétés currentTime et duration.
Afin de présenter des informations de manière conviviale en ce qui concerne le nombre de secondes en cours on utilise la fonction converSeconde(oTime)
L'évènement associé : document.getElementById("currentVideo").addEventListener("timeupdate", progressBar, true);

clickProgressBar(e)

Un click dans la barre de progression permet de re-positionner la vidéo
L'évènement associé : document.getElementById("canvas").addEventListener("click",clickProgressBar,true);

Soustitrer le média : track et WebVTT

WebVTT

WebVTT (Web Video Text Tracks) est un format de fichier, qui associé à javascript et à la balise HTML5 track permet d'afficher des commentaires sur une vidéo à des moments choisis de la lecture. Ce fichier est un fichier de type texte classique avec l'extansion .vtt

Le fichier de description : .vtt

Généralités

Ces fichiers contiennent des textes avec une échelle de temps pour que les sous-titres ou diverses informations se synchronisent avec le média.
Ils se présentent comme des fichiers textes classiques, éditables par des traitements de textes classiques et dont les informations contenues doivent respecter certaines règles.

Limites d'utilisation

Le fichier WebVTT doit se trouver sur le serveur. Pas de test possible avec le fichier en local

Structure générale

WEBVTT

idCue1
00:00:5.000 --> 00:00:10.500
WebMédia MonWebFacile

idCue2
00:00:12.000 --> 00:00:18.500
Entrée du jardin

Le fichier doit commencer obligatoirement par WEBVTT
Un élément (ou cue) se compose d'un identifiant facultatif, de la définition de l'intervalle de temps et à la ligne suivante l'information que l'on désire afficher durant cet intervalle.
Chaque élément (ou cue) est obligatoire séparé par un saut de ligne.
Un élément peut se composer de plusieurs lignes. Les retour à la ligne sont autorisés.
Les indications de timing sont donnés en HH:MM:SS.MS
Les temps de début et temps de fin sont séparés par une flèche -->
On verra que l'on peut aussi affecter des identifiants à chaque élément et appliquer des styles.

Exemple live si votre navigateur le permet

WEBVTT

00:00:02.000 --> 00:00:05.500
En été à Héricy

00:00:06.000 --> 00:00:10.500
Bouquet de fushias

00:00:13.000 --> 00:00:19.500
Composition florale

00:00:20.000 --> 00:00:23.500
A bientôt

Propriétés et attributs de la balise track

Limites d'utilisation

La balise track n'est pas supportée par tous les navigateurs mais déja par Opéra et Chrome.

Syntaxe générale d'utilisation

Attributs

Attributs	Valeurs	Commentaires
label	Chaine de caractères	Le titre est disponible pour l'utilisateur lorsque on liste les pistes (subtitles, captions, et audio descriptions) dans l'interface utilisateur.
src	Chaine de caractères	Adresse du fichier contenant les informations.
kind	Chaine de caractères	Définit le type de donnée à ajouter au media
	"descriptions"	Description textuelle du contenu vidéo à l'intention des personnes mal-voyantes. Exemple : apporte des informations relative à une bande son, ou à un film, sur l’action qui se déroule,
	"captions"	Fournit une transcription ou une traduction du son associé au media, lorsque le média ne possède pas de son ou que celui-ci est inaudible. Il peut aussi inclure des informations non-orales commes des indications sur la musique ou les sons joués. Exemple : transcriptions de certaines informations relatives à une bande son, ou à un film, comme des cris, ou pourquoi l’acteur a une certaine réaction, indique également indique qui parle,
	"subtitles"	Pour fournir des informations ou une traduction du contenu (média dans une langue non comprise par l'utilisateur).Exemple : sous titre d’une bande son, ou d’un film, principalement basé sur la traduction des textes, ou des paroles,
	"chapters"	Titres de chapitres utilisés dans le cadre d'une navigation interactive sous forme d'une liste présentée dans l'interface utilisateur.
	"metadata"	Données spécifiques du média (durée, dimension, vitesse...). N'est pas directement visible par l'utilisateur.
default	"default"	Elément actif en priorité à moins que les réglages de l'utilisateur ne montrent qu'un autre élément track doit être choisi en priorité. Cet attribut ne peut être utilisé que pour un seul élément track pour chaque élément media.
srclang	"en" => Anglais "fr" => Français "fr-CA" => Canada etc ...	Etiquette d'identification de la langue. Doit être conforme à la norme BCP 47.
mode	showing ou hidden	Le sous titrage sera affiché (showing) ou pas (hidden).

Notes sur les attributs:

si l'attribut kind n'est pas spécifié subtitles est sélectionné par défaut.
si kind = "subtitle", l'attribut srclang est requis
il ne doit pas y avoir plusieurs éléments <track> avec les mêmes attributs label et kind

Propriétés et méthodes

Objects

Methodes

Commentaires

textTracks

var TracksList = document.getElementById(VideoELementId).textTracks;
var nbTracks = TrackList.length;
var TrackX = TracksList[X];

Represente la liste (tableau) des Tracks associés à une vidéo. On utilise la propriété length pour déterminer le nombre de tracks contenu dans la liste, et on accède à un track particulier en indexant le tableau.

track

var Track = document.getElementById(trackElementId).track;

Utilisé pour obtenir toutes informations sur un Track défini par son ID. C'est équivalent à TracksList[X] avec X comme index du track.

cues

var CuesList = TracksList[X].cues;
var nbCues = CuesList.length;
var CueX = CuesList[X];

Represente la liste (tableau) des cues associées à un track. On utilise la propriété length pour déterminer le nombre de cues contenues dans la liste, et on accède à une cue particulière en indexant le tableau.

var CueActiveList = TracksList[X].activeCues;
var nbCuesActive = CueActiveList.length;
var CueXActive = CueActiveList[X];

Represente la liste (tableau) des cues actives associées à un track. On utilise la propriété length pour déterminer le nombre de cues actives contenues dans la liste, et on accède à une cue active particulière en indexant le tableau. La propriété activeCues permet à l’application d’obtenir le repère associé au segment de temps actuel de la vidéo. Une piste de texte peut avoir des temps qui se chevauchent. Il est donc possible d’avoir plus d’un sous-titre pour un point donné dans une vidéo. La propriété activeCues retourne un objet qui représente un ou plusieurs repères associés au segment de temps lorsque activeCues est lu.

Méthodes	Valeurs	Commentaires	Syntaxes
id	Identificateur de la cue.	Retourne ou règle l'identificateur de la cue.	var Text = CueX.text; ou CueX.Text = "toto";
text	Texte de la cue	.Retourne ou règle le texte de la cue.	var Id = CueX.id; ou CueX.id = "toto";
Méthodes de positionnement du sous-titre.
vertical	rl \|\| lr	RightLeft ou LeftRight.Retourne ou règle l'alignement du texte verticalement à gauche (rl) ou à droite (lr). Par défaut horizontal.	var Vertical = CueX.vertical; ou CueX.vertical = "rl";
line	[-][0 ou plus],[auto]	Retourne ou règle la référence à un numéro de ligne spécifique (positionnement vertical). Les numéros de ligne sont basés sur la taille de la première ligne de la cue. Un nombre négatif pour un positionnement à partir du bas, positif à partir du haut. Par défaut auto. ATTENTION Ne s'applique que aux cues actives.	var Line = CueX.line; ou CueX.line = 10;
position	[0-100]%	Retourne ou règle le pourcentage positionnement horizontal. Par défaut 50%.	var Position = CueX.position; ou CueX.position = 30%;
size	[0-100]%	Retourne ou règle le pourcentage de taille de la boite text par rapport à la taille du média. Par défaut 100%.	var Size = CueX.size; ou CueX.size = 80%;
align	start \|\| middle \|\| end	Retourne ou règle le positionnement du texte à partir de la gauche(start), au milieu (middle), à partir de la gauche(end). Par défaut middle.	var Align = CueX.align; ou CueX.align = "end";
Méthodes de réglage du timing.
startTime		Retourne ou règle le timing de départ de la cue.	var StartTime = CueX.startTime; ou CueX.startTime = "00:00:10.500";
endTime		Retourne ou règle le timing de fin de la cue.	var EndTime = CueX.endTime; ou CueX.endTime = "00:00:10.500";

Multiple track

Généralités

La possibilité de programmer plusieur "track" pour une même vidéo est trés interressante, en particulier si on souhaite des sous-titres en multilangue.

Les fichiers VTT correspondant

fichier hericy_fr.	fichier hericy_en.	fichier hericy_de.
WEBVTT 00:00:02.000 --> 00:00:05.500 En été à Héricy 00:00:06.000 --> 00:00:10.500 Bouquet de fushias 00:00:13.000 --> 00:00:19.500 Composition florale 00:00:20.000 --> 00:00:23.500 A bientôt	WEBVTT 00:00:02.000 --> 00:00:05.500 Héricy in summer 00:00:06.000 --> 00:00:10.500 bouquet of red flowers 00:00:13.000 --> 00:00:19.500 Flower arrangement 00:00:20.000 --> 00:00:23.500 See you soon	WEBVTT 00:00:02.000 --> 00:00:05.500 Im Sommer Héricy 00:00:06.000 --> 00:00:10.500 Strauß fushias 00:00:13.000 --> 00:00:19.500 Blumenzusammenstellung 00:00:20.000 --> 00:00:23.500 Bis bald

Sélection dynamique des fichiers

Certains navigateurs offrent un bouton de sélection des différents track. Toutefois comme le résultat est hypothétique il est préférable de prevoir une action via javascript, et pour cela on utilisera l'attribut mode
TracksList[i].mode = "showing" ou "hidden"

Personnaliser les cues

Appliquer des styles

Des informations de style peuvent être ajoutées aux sous-titres dans le fichier ou en dynamique.

En ligne
- i pour une partie de texte en italique
- b pour une partie de texte en gras
- u pour une partie de texte sous-ligné
- Exemple : En <i>été</i> <u>à</u> <b>Héricy</b> donnera : En été à Héricy

Par la pseudo classe ::cue applicable actuellement pour les navigateurs Chrome, Opera, Safari sur les éléments suivants :
- color
- font
- opacity
- visibility
- text-decoration
- text-shadow
- line-height
- background shorthand properties
- outline shorthand properties
- font shorthand properties, including line-height
- white-space
Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule background (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).

Au niveau des styles la syntaxe de déclaration est la suivante :
<style type="text/css"> ::cue(.red){ color: red; } ::cue(.blue){ color: blue; } ::cue(.green){ color: green; } ::cue(.background-red){ background-color: red; } ::cue (.monStyle){ color: #fff; background-color: rgba(0, 0, 0, 0.6); font-size:1.6em; } <style>

Exemples de définitions de styles avec la cue dont le texte est "Bouquet de fushias":
- Texte en vert : <c.green>Bouquet de fushias</c>
- Texte en blanc sur arrière-plan type boîte noire transparente et une taille des carctères de 1.6em : <c.monStyle>Bouquet de fushias</c>.
- Texte bleu sur arrière-plan type boîte rouge : <c.blue.background-red>Bouquet de fushias</c>.

Avertissement

Certains possibilités comme la référence à des pseudo classes ne fonctionnent pas avec tous les navigateurs comme Firefox. Cela fonctionne avec Chrome.

Positionnements applicables

Attributs d'informations de positionnement des textes

Attributs	Valeurs	Commentaires	Syntaxes
vertical	rl \|\| lr	RightLeft ou LeftRight.Alignement du texte verticalement à gauche (rl) ou à droite (lr). Par défaut horizontal	vertical:rl vertical:lr
line	[-][0 ou plus],[auto]	Référence à un numéro de ligne spécifique (positionnement vertical). Les numéros de ligne sont basés sur la taille de la première ligne de la cue. Un nombre négatif pour un positionnement à partir du bas, positif à partir du haut. Par défaut auto	line:10
position	[0-100]%	Pourcentage positionnement horizontal. Par défaut 50%.	position:50% Attention :Si on veut utiliser <align> mettre position à 50%
size	[0-100]%	Pourcentage de taille de la boite text par rapport à la taille du média. Par défaut 100%.	size:10%
align	start \|\| middle \|\| end	Positionnement du texte à partir de la gauche(start), au milieu (middle), à partir de la gauche(end). Par défaut middle.	align:start align:middle align:end

Note : le positionnement par défaut est centré en bas.

Syntaxe

Ces directives doivent être placées sur la même ligne que les indications de timing.

Exemple :
00:00:06.000 --> 00:00:10.500 vertical:r1
Bouquet de fushias

ou :
00:00:06.000 --> 00:00:10.500 size:50%
Bouquet de fushias

ou :
00:00:06.000 --> 00:00:10.500 size:50% vertical:rl
Bouquet de fushias

Interaction avec javascript

Accéder aux tracks d'une vidéo

var trackList = document.getElementById("idMyVideo").textTracks; permet de récupérer la liste des tracks dans un tableau.
var lgtrackList = trackList.length; l'application de la propriété length appliquée au tableau des tracks donne le nombre de tracks de la vidéo.
var trackX = trackList[X]; pour sélectionner un track particulier de la vidéo.
var infoMode = trackX.mode; pour récupérer ou modifier l'état d'un track particulier (hidden ou showing).
var infoLabel = trackX.label; pour récupérer ou modifier le titre d'un track particulier.
var infoKind = trackX.kind; pour récupérer ou modifier le type de donnée d'un track particulier.
var infoLanguage = trackX.language; pour récupérer ou modifier la langue associée à un track particulier.

Voir / Modifier le contenu d'un élément (cue)

var cues = track.cues; permet de récupérer la tableau des cues pour un track détéerminé,
var textCueX = cues[X].text permet de récupérer le texte de la cue.
var active_cues = track.activeCues; permet de récupérer la tableau des cues actives pour un track détéerminé,
var textCueXactive = active_cues[X].text; permet de se positionner sur la cue active.
activeCues[0].text = "Bien venue"; permet de modifier le contenu d'une cue

Voir / Modifier le positionnement d'une cue

active_cues[X].size = y%;

Ajouter une cue

Nous allons créer un nouvel élément(cue) avec un départ à 1 seconde et un arrêt à 30 secondes.
var new_cue = new VTTCue(1,30, "Le nouvel élément...");
Déclarer le positionement dans le track du nouvel élément (cue)
new_cue.line = 5;
Rajouter le nouvel élément (cue) dans le track
track.addCue(new_cuew);

Evènements associés

Evènements		Commentaires
onchange	change
onaddtrack	addtrack
onremovetrack	removetrack
oncuechange	cuechange	onCueChange="cueChange()" dans la déclaration du track, ou track.addEventListener("cuechange", cueChange, false);
onenter	enter
onexit	exit

Fiche Javascript : Audio et Vidéo en HTML5

Objet de la fiche :

État de la fiche

Plan de la fiche :

Avant propos :

Méthodes, propriétés, évènements

Les méthodes

Les propriétés

Les évènements

Types mime audio et vidéo

Audio

Vidéo

Un lecteur audio en javascript

Lecteur simple

Lecteur original

window.requestAnimationFrame

window.AudioContext

Un lecteur vidéo en javascript

Etape 1 : structure de base

Etape 2 : commander le lecteur

Etape 3 : afficher une barre de progression

Soustitrer le média : track et WebVTT

WebVTT

Le fichier de description : .vtt

Généralités

Limites d'utilisation

Structure générale

Propriétés et attributs de la balise track

Limites d'utilisation

Syntaxe générale d'utilisation

Attributs

Propriétés et méthodes

Multiple track

Généralités

Les fichiers VTT correspondant

Sélection dynamique des fichiers

Personnaliser les cues

Appliquer des styles

Positionnements applicables

Attributs d'informations de positionnement des textes

Syntaxe

Interaction avec javascript

Accéder aux tracks d'une vidéo

Voir / Modifier le contenu d'un élément (cue)

Voir / Modifier le positionnement d'une cue

Ajouter une cue

Evènements associés

Exemple complet

Application au projet de site web