La balise HTML5 video
Le code html de la vidéo
<video width="100%" preload="auto" controls id="idvideo">
<source type="video/mp4" src="img/videos/mov_bbb.mp4"></source>
<source type="video/ogg" src="img/videos/mov_bbb.ogv"></source>
<source type="video/webm" src="img/videos/mov_bbb.webm"></source>
Votre navigateur ne supporte pas la balise HTML5 video.
</video>
Listes propriétés et méthodes javascript de la balise video.
| Liste des propriétés | ||
|---|---|---|
| autoplay | ended | preload |
| buffered | error | readyState |
| controls | loop | seekable |
| crossOrigin | muted | seeking |
| currentSrc | networkState | src |
| currentTime | paused | videoHeight |
| defaultMuted | playbackRate | videoWidth |
| defaultPlaybackRate | played | volume |
| duration | poster | |
| Liste des méthodes | ||
| canPlayType() | load() | pause() |
| play() | ||
Compatibilité navigateur de la balise HTML5 video.
Détecter en js si la balise video est compatibile.
var oVideotmp = document.createElement('video');
if(!!oVideotmp.canPlayType){
//ok faire des tests canPlayType() et si ok
oVideo = document.getElementById("idvideo");
}else{
//pas ok
}
Propriété javascript d'erreur de la balise HTML5 video.
video.error
La propriété HTMLMediaElement.error de l'objet HTML5 video permet de connaître le type d'erreur.
error retourne comme valeur :
- null si il n'y a pas eu d'erreur,
- un objet MediaError pour l'erreur la plus récente. Pour récupérer le numéro de l'erreur, vous devez utiliser la propriété code de l'objet MediaError.
Cliquez-moi pour générer une erreur :
Les numéros possibles de code sont :
1 soit MediaError.MEDIA_ERR_ABORTED, la récupération de la vidéo a été abandonnée par le navigateur à la demande de l'utilisateur.
2 soit MediaError.MEDIA_ERR_NETWORK, une erreur de réseau est survenue.
3 soit MediaError.MEDIA_ERR_DECODE, une erreur au décodage de la vidéo est survenue.
4 soit MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED, la ressource de la vidéo indiquée par l'attribut src ne convenait pas.
Propriétés javascript des attributs de la balise HTML5 video
video.controls
La propriété javascript HTMLMediaElement.controls de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut controls.
L'attribut controls de la balise HTML5 video spécifie si l'interface de la vidéo est affichée (bouton, son, barre des temps, ...).
controls accepte et retourne une valeur de type booléen :
- true, l'interface de la vidéo est affichée,
- false, l'interface de la vidéo est cachée.
Cliquez-moi pour changer la valeur de oVideo.controls:
video.src
La propriété Javascript HTMLMediaElement.src de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut src.
L'attribut src de la balise HTML5 video spécifie l'url de la vidéo à utiliser.
src accepte :
- une url relative à la page ou absolue,
- une chaine vide.
src retourne :
- une url absolue,
- une chaine vide si l'attribut src n'est pas spécifié.
Cliquez-moi pour changer la valeur de oVideo.src.
video.preload
La propriété Javascript HTMLMediaElement.preload de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut preload.
L'attribut preload de la balise HTML5 video spécifie quels types de données doivent être préchargées au chargement de la vidéo.
preload accepte et retourne la valeur :
- none : pas de chargement de la vidéo au chargement de la page,
- metadata : chargement que des metadata de la vidéo au chargement de la page,
- auto : chargement de la vidéo au chargement de la page.
Cliquez-moi pour changer la valeur de oVideo.preload.
video.defaultMuted
La propriété Javascript HTMLMediaElement.defaultMuted de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut muted.
L'attribut muted de la balise HTML5 video spécifie si par défaut le son de la vidéo est coupé.
Cette propriété n'a aucun effet dynamique, pour couper ou réactiver le son de la vidéo, utilisez la propriété HTMLMediaElement.muted.
defaultMuted accepte et retourne une valeur de type booléen :
- true, le son audio de la vidéo par défaut est coupé,
- false, le son audio de la vidéo par défaut n'est pas coupé.
Cliquez-moi pour changer la valeur de oVideo.defaultMuted.
video.crossOrigin
La propriété Javascript HTMLMediaElement.crossOrigin de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut crossorigin.
L'attribut crossorigin de la balise HTML5 video spécifie comment l'élément gère les requêtes Cross-Domain.crossOrigin accepte et retourne comme valeur :
- anonymous, une requête d'origines multiples (cross-origin) est effectuée (c'est-à-dire avec l'en-tête HTTP Origin). Toutefois aucune information d'authentification n'est envoyée. Valeur utilisée par défaut.
- use-credentials, une requête d'origines multiples (avec l'en-tête HTTP Origin:) est effectué et des informations d'authentification sont envoyées.
Cliquez-moi pour changer la valeur de oVideo.crossOrigin.
video.poster
La propriété Javascript HTMLVideoElement.poster de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut poster.
L'attribut poster de la balise HTML5 video spécifie l'url de l'image à afficher avant la lecture de la vidéo.poster accepte :
- une url relative par rapport à la page ou absolue,
- une chaine vide.
poster retourne :
- une url absolue,
- une chaine vide si l'attribut n'est pas spécifié (ou une url).
Cliquez-moi pour changer la valeur de oVideo.poster.
Propriétés concernant les infos de la vidéo
video.currentSrc
La propriété Javascript HTMLMediaElement.currentSrc de l'objet HTML5 video permet de connaître l'url de la vidéo en cours.
currentSrc retourne comme valeur :
- une url absolue de la vidéo en cours,
- chaine vide siHTMLMediaElement.networkState = 0.
La valeur de oVideo.currentSrc.
video.duration
La propriété Javascript HTMLMediaElement.duration de l'objet HTML5 video permet de connaître durée en seconde de la vidéo en cours.
duration retourne comme valeur :
- 0, si aucune donnée de la vidéo est disponible.
- NaN, si les données de la vidéo sont disponibles, mais la longueur est inconnue.
- Inf, si la vidéo est en continu et n'a pas de longueur prédéfinie.
Pour être en mesure de connaître la durée, HTMLMediaElement.readyState doit être supérieure ou égale à HTMLMediaElement.HAVE_METADATA
La valeur de oVideo.duration.
video.seeking
La propriété Javascript HTMLMediaElement.seeking de l'objet HTML5 video permet de savoir le lecteur de la vidéo est en train de chercher une nouvelle position de lecture.
seeking retourne une valeur de type booléen :
- true, le lecteur est en cours de recherche d'une nouvelle position,
- false, le lecteur ne recherche pas de position.
La valeur de oVideo.seeking.
video.seekable
La propriété Javascript HTMLMediaElement.seekable de l'objet HTML5 video permet de savoir la plage de temps en seconde disponible de la vidéo.
seekable retourne une valeur de type TimeRanges :
- si on n'est pas en mesure de fournir la plage alorsTimeRanges.length = 0, c'est le cas sipreload="none"
La valeur de oVideo.seekable.
video.videoWidth
La propriété Javascript HTMLVideoElement.videoWidth de l'objet HTML5 video permet de connaître la longueur réelle de la vidéo.
videoWidth retourne comme valeur :
- 0, sireadyState = HAVE_NOTHING,
- un nombre entier, qui représente la longueur réelle.
La valeur de oVideo.videoWidth.
video.videoHeight
La propriété Javascript HTMLVideoElement.videoHeight de l'objet HTML5 video permet de connaître la hauteur réelle de la vidéo.
videoHeight retourne comme valeur :
- 0, sireadyState = HAVE_NOTHING,
- un nombre entier, qui représente la hauteur réelle.
La valeur de oVideo.videoHeight.
video.networkState
La propriété Javascript HTMLMediaElement.networkState de l'objet HTML5 video permet de connaître la valeur de l'état du réseau actuel de la vidéo.
networkState retourne une des valeurs suivante :
- 0 soit HTMLMediaElement.NETWORK_EMPTY, la vidéo n'est pas encore initialisée. Tous les attributs sont dans leur état initial.
- 1 soit HTMLMediaElement.NETWORK_IDLE, l'algorithme de sélection des ressources de l'élément est activé et est choisi d'une ressource, mais il n'a pas été fait en utilisant le réseau à ce moment.
- 2 soit HTMLMediaElement.NETWORK_LOADING, le navigateur est en cours de téléchargement de la vidéo.
- 3 soit HTMLMediaElement.NETWORK_NO_SOURCE, l'algorithme de sélection des ressources de l'élément actif, mais il n'a pas encore trouvé une ressource à utiliser.
La valeur de oVideo.networkState.
video.readyState
La propriété Javascript HTMLMediaElement.readyState de l'objet HTML5 video permet de connaître la valeur de l'état de la récupération de la vidéo sur le réseau.
readyState retourne une des valeurs suivante :
- 0 soit HTMLMediaElement.HAVE_NOTHING, aucune information disponible sur la source de la vidéo.
- 1 soit HTMLMediaElement.HAVE_METADATA, assez de la ressource de la vidéo a été récupéré que les attributs de métadonnées sont initialisés. A la recherche ne soulevera pas une exception.
- 2 soit HTMLMediaElement.HAVE_CURRENT_DATA, les données sont disponibles pour la position de lecture actuelle, mais pas assez pour réellement jouer plus d'une trame.
- 3 soit HTMLMediaElement.HAVE_FUTURE_DATA, les données pour la position de lecture actuelle ainsi que pour au moins un peu de temps dans l'avenir est disponible (en d'autres termes, au moins deux images de la vidéo, par exemple).
- 4 soit HTMLMediaElement.HAVE_ENOUGH_DATA, il y a suffisamment de données disponibles et le taux de téléchargement est assez élevé pour que la vidéo puisse être lue jusqu'à la fin sans interruption..
La valeur de oVideo.readyState.
Propriétés concernant la lecture de la balise HTML5 video
video.loop
La propriété Javascript HTMLMediaElement.loop de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut loop.
L'attribut loop de la balise HTML5 video spécifie si la lecture de la vidéo doit repartir à zéro à la fin de la vidéo.
loop accepte et retourne une valeur de type booléen :
- true, reprend la lecture au début à la fin de la vidéo,
- false, ne reprend pas la lecture au début à la fin de la vidéo.
Déclenche l'événement playing de l'objet HTML5 video à la relecture.
Cliquez-moi pour changer la valeur de oVideo.loop :
video.autoplay
La propriété Javascript HTMLMediaElement.autoplay de l'objet HTML5 video permet de connaître ou de spécifier la valeur de l'attribut autoplay.
L'attribut autoplay de la balise HTML5 video spécifie si la lecture de la vidéo se fait automatiquement dès que le préchargement de la vidéo est suffisamment pour faire une lecture sans interruption.
Sous Chrome, mais il n'est pas le seul l'autoplay ne fonctionne que si l'attribut muted est activé.autoplay accepte et retourne une valeur de type booléen :
- true, la lecture de la vidéo démarre automatiquement,
- false, la lecture de la vidéo ne démarre pas automatiquement.
Cliquez-moi pour changer la valeur de oVideo.autoplay.
video.defaultPlaybackRate
La propriété Javascript HTMLMediaElement.defaultPlaybackRate de l'objet HTML5 video permet de connaître la vitesse de lecture de la vidéo.
defaultPlaybackRate retourne et accepte une valeur de type float :
- 1.0, lecture de la vidéo en vitesse normale, valeur par défaut,
- inférieure à 1.0 lecture de la vidéo en vitesse plus lente que la normale,
- supérieur à 1.0 lecture de la vidéo en vitesse plus rapide que la normale.
La valeur 0.0 est invalide et lève une exception NOT_SUPPORTED_ERR.
Déclenche l'événement ratechange de l'objet HTML5 video au changement de valeur.
Valeur de oVideo.defaultPlaybackRate.
video.playbackRate
La propriété Javascript HTMLMediaElement.playbackRate de l'objet HTML5 video permet de connaître et de spécifier la vitesse de lecture de la vidéo.
playbackRate retourne une valeur de type float :
- 1.0, lecture de la vidéo en vitesse normale, valeur par défaut,
- inférieure à 1.0 lecture de la vidéo en vitesse plus lente que la normale, attention aux les valeurs négatives,
- supérieur à 1.0 lecture de la vidéo en vitesse plus rapide que la normale,
A certaines vitesses de lecture rapide ou lente le son est coupé, ces vitesses dépendent du navigateur.
Déclenche l'événement ratechange de l'objet HTML5 video au changement de valeur.
Cliquez-moi pour changer la valeur de oVideo.playbackRate.
video.paused
La propriété Javascript HTMLMediaElement.paused de l'objet HTML5 video permet de savoir si la lecture de la vidéo est en pause.
paused retourne une valeur de type booléen :
- true, la lecture de la vidéo est en pause,
- false, la lecture de la vidéo en cours.
Déclenche l'événement pause de l'objet HTML5 video à son passage à true.
La valeur de oVideo.paused.
video.currentTime
La propriété Javascript HTMLMediaElement.currentTime de l'objet HTML5 video permet de connaître ou de spécifier le temps en seconde de la position de la lecture de la vidéo.
currentTime accepte comme valeur :
- un nombre décimal positif.
currentTime retourne comme valeur :
- un nombre décimal. 0 étant sa valeur initiale.
Déclenche l'événement timeupdate de l'objet HTML5 video au changement de valeur.
Cliquez-moi pour changer la valeur de oVideo.currentTime.
video.buffered
La propriété Javascript HTMLMediaElement.buffered de l'objet HTML5 video permet de connaître les/la plage de temps en seconde mis en mémoire par le navigateur.
buffered retourne une valeur de type TimeRanges :
-TimeRanges.length = 0, si aucune plage mise en mémoire.
-TimeRanges.length > 1, si il y a plusieurs plages mises en mémoire, par exemple si durant la mise en mémoire vous avez cliqué à plusieurs endroits de la barre de temps.
-TimeRanges.length = 1, si après la mise en mémoire totale.
Déclenche l'événement progress de l'objet HTML5 video au changement de valeur.
Cliquez-moi pour voir la valeur de oVideo.buffered (cliquez à plusieurs endroits de la barre de temps).
video.played
La propriété Javascript HTMLMediaElement.played de l'objet HTML5 video permet de connaître les/la plage de temps en seconde de la vidéo déjà jouées par le navigateur.
played retourne une valeur de type TimeRanges :
-TimeRanges.length = 0, si aucune plage n'a été jouée.
-TimeRanges.length > 1, s'il y a plusieurs plages ont été jouées, par exemple si durant la première lecture, vous avez cliqué à plusieurs endroits de la barre de temps.
-TimeRanges.length = 1, si après la première lecture complête.
Cliquez-moi pour voir la valeur de oVideo.played (cliquez à plusieurs endroits de la barre de temps pendant la lecture).
video.ended
La propriété Javascript HTMLMediaElement.ended de l'objet HTML5 video permet de savoir si la lecture de la vidéo est terminée.
ended retourne une valeur de type booléen :
- true, la lecture de la vidéo est terminée,
- false, la lecture de la vidéo n'est pas terminée.
Déclenche l'événement ended de l'objet HTML5 video à son passage à true.
La valeur de oVideo.ended.
Propriétés concernant le son de la balise HTML5 video
video.volume
La propriété Javascript HTMLMediaElement.volume de l'objet HTML5 video permet de connaître ou de spécifier le volume du son de la vidéo.
volume accepte et retourne une valeur comprise entre :
- 0.0 pour silencieux et 1.0 le plus fort (valeur par défaut).
Déclenche l'événement volumechange de l'objet HTML5 video.
Cliquez-moi pour changer la valeur de oVideo.volume.
video.muted
La propriété Javascript HTMLMediaElement.muted de l'objet HTML5 video permet de connaître ou de spécifier si le son audio de la vidéo est coupé.
muted accepte et retourne une valeur de type booléen :
- true, le son de la vidéo est coupé,
- false, le son de la vidéo est activé.
Déclenche l'événement volumechange de l'objet HTML5 video.
Cliquez-moi pour changer la valeur de oVideo.muted.
Méthode javascript de la balise HTML5 video
video.play()
La méthode HTMLMediaElement.play() de l'objet HTML5 video permet de lancer la lecture de la vidéo.
Si vous avez modifié l'attribut src de l'élément video depuis que la page a été chargée, vous devez appeler HTMLMediaElement.load() avant HTMLMediaElement.play(), sinon c'est l'ancienne vidéo qui est jouée à nouveau.
Déclenche l'événement play de l'objet HTML5 video. Sous Chrome, mais il n'est pas le seul le play() ne fonctionne que s'il y a eu au préalable une action explicite comme un clic.
Cliquez-moi pour lancer la méthode oVideo.play().
video.pause()
La méthode Javascript HTMLMediaElement.pause() de l'objet HTML5 video permet de mettre en pause la lecture de la vidéo.
Cliquez-moi pour lancer la méthode oVideo.pause().
video.load()
La méthode Javascript HTMLMediaElement.load() de l'objet HTML5 video permet de commencer à charger la vidéo spécifiée dans l'attribut src de la balise video.
Cliquez-moi pour lancer la méthode oVideo.load().
video.canPlayType(sFormat)
La méthode Javascript HTMLMediaElement.canPlayType(sFormat) de l'objet HTML5 video permet se savoir si le type de support spécifié peut être lu.
sFormat peut prendre la valeur :
- d'un type mine ou d'un type mine et d'un codec.
Par défaut vous devez au moins tester les formats suivant :
-'video/ogg; codecs="theora"'
-'video/mp4; codecs="avc1.42E01E"'
-'video/webm; codecs="vp8, vorbis"'
canPlayType() retourne comme valeur :
- probably, si le type spécifié est jouable.
- maybe, s'il est impossible de dire si le type est jouable sans jouer la vidéo.
- une chaîne vide, si le type spécifié ne peut pas être joué ou si le type est application / octet-stream.
Cliquez-moi pour lancer la méthode oVideo.canPlayType(). Valeurs retournées par oVideo.canPlayType()
Exemple de sFormat
Exemple de type mine seul :
video/mp4, video/3gpp, video/ogg, video/webm, video/x-matroska.
Exemple de type mine et codec :
video/mp4; codecs="avc1.42E01E, mp4a.40.2" , video/mp4; codecs="avc1.58A01E, mp4a.40.2" , video/mp4; codecs="avc1.4D401E, mp4a.40.2" , video/mp4; codecs="avc1.64001E, mp4a.40.2" , video/mp4; codecs="mp4v.20.8, mp4a.40.2" , video/mp4; codecs="mp4v.20.240, mp4a.40.2"
, video/3gpp; codecs="mp4v.20.8, samr"
, video/ogg; codecs="theora, vorbis" , video/ogg; codecs="theora, speex" , video/ogg; codecs="dirac, vorbis"
, video/webm; codecs="vp8.0, vorbis"
, video/x-matroska; codecs="theora, vorbis"