Vos résultats de recherche

    <video>

    Ajouté dans HTML5

    Résumé

    L'élément HTML <video> est utilisé pour intégrer des vidéo dans un document HTML ou XHTML.

    Pour obtenir une liste des formats supportés, voir les formats supportés par les éléments audio et video.

    Attributs

    Comme tous les éléments HTML, cet élément possède les attributs globaux.

    autoplay
    Un attribut booléen. S'il est renseigné, la vidéo sera automatiquement lancée dès que suffisamment de données auront été enregistrées pour que la lecture ne soit pas interrompue.
    autobuffer
    Un attribut booléen. S'il est renseigné, la vidéo sera automatiquement chargée en mémoire tampon même si elle ne doit pas être lancée automatiquement. Cet attribut devrait être utilisé dans les cas de figures où il est probable que la vidéo sera jouée. La vidéo est mise en mémoire cache jusqu'à ce que le cache média soit plein.
    Note relative à l'implémentation : Bien que faisant partie de la plupart des ébauches de la spécification HTML5, l'attribut autobuffer a été abandonné dans les versions ultérieures. Il a été retiré de Gecko 2.0 et des autres navigateurs (pour certains, il n'a jamais été implémenté). La spécification définit un nouvel attribut preload remplaçant l'attribut autobuffer et utilisant une différente syntaxe. bug 548523
    buffered
    Un attribut qui peut être lu pour déterminer les fragments du media ayant été mis en mémoire cache. Cet attribut contient un objet TimeRanges.
    controls
    Si cet attribut est présent, Gecko permettra à l'utilisateur d'utiliser différents contrôles sur la lecture de la vidéo comme la gestion du volume, naviguer à un endroit précis de la vidéo, la mise en pause ou la reprise de la lecture.
    crossorigin
    Cet attribut dénombrable indique si le média peut être utilisé depuis une origine distante (CORS) ou pas. Les ressources avec CORS activé peuvent être ré-utilisées dans un élément <canvas> sans le corrompre. Les valeurs autorisées sont :
     
    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 (pas de cookie, pas de certificat X.509, pas d'authentification HTTP simple). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (en ne réglant pas l'en-tête HTTP avec la valeur Access-Control-Allow-Origin:), l'image sera corrompue et son utilisation restreinte.
    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 (un cookie, un certificat et une authentification HTTP simple sont effectuées). Si le serveur ne fournit pas d'informations d'authentification au site d'origine via l'en-tête HTTP Access-Control-Allow-Credentials:, l'image sera corrompue et son utilisation restreinte.
    Quand cet attribut n'est pas présent, la requête de la ressource est effectuée sans requête CORS (sans envoyer d'en-tête HTTP Origin:), afin d'éviter un usage non-corrompu dans des éléments <canvas>. Si cet attribut est invalide, il est pris en compte comme si le mot-clé anonymous avait été utilisé. Voir la page attributs de réglage du CORS pour plus d'informations.
    height
    La hauteur utilisée pour afficher la zone dédiée à l'élément video, exprimée en pixels CSS.
    loop
    Un attribut booléen. S'il est définit et vaut true la lecture en boucle de la vidéo sera activée.
    muted
    Un attribut booléen indiquant si le son de la vidéo doit être coupé à la lecture ou non. Sa valeur par défaut est false, indiquant que le son de la vidéo doit être activé à la lecture.
    played
    Un objet TimeRanges indiquant tous les fragments de la vidéo ayant été lus.
    preload
    Cet attribut énumératif permet de fournir au navigateur une indication lui permettant de savoir ce que l'auteur de la page pense de l'utilisation optimale de cet élément. Il peut prendre les valeurs suivantes :
    none : cela indique que soit l'auteur pense que l'utilisateur n'aura pas besoin de cet élément soit que le serveur souhaite minimiser son traffic. En d'autres termes, cela indique que l'élément video ne devrait pas être mis en cache.
    metadata : cela indique que, malgré que l'auteur pense que l'utilisateur n'aura pas besoin de l'élément video, il est préférable de préparer les méta-données (comme la durée)
    auto : cela indique que l'utilisateur a besoin de cet élément en priorité. Cela signifie que, si nécessaire, l'élément audio en entier sera téléchargé même si l'utilisateur pourra ne pas le lire.
    "" (chaîne de caractères vide) : synonyme de auto
    Si cet attribut n'est pas renseigné, la valeur par défaut sera celle du navigateur (chaque navigateur pouvant définir sa propre valeur). Les spécifications conseillent la valeur metadata comme valeur par défaut.
    Note d'utilisation : L'attribut autoplay annulera cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement. Renseigner les deux attributs autoplay et preload est autorisé par la spécification. Bien que le navigateur n'a pas, selon la spécification, à suivre la valeur de cet attribut. Il n'est qu'une simple indication.
    poster
    Une URL indiquant une image à afficher dans le cadre de l'élément jusqu'à que l'utilisateur lance la lecture ou aille à un endroit précis de la vidéo. Si l'attribut n'est pas renseigné alors rien n'est affiché jusqu'à ce que la première frame soit disponible et soit donc affichée.
    src
    L'URL de la vidéo à intégrer. Cet attribut est optionnel et il est possible d'utiliser l'élément <source> au sein de l'élément video pour définir la vidéo à intégrer.
    width
    La largeur utilisée pour afficher la zone dédiée à la vidéo, exprimée en pixels CSS.

    Les décalages de temps sont actuellement définis comme le nombre flottant représentant le nombre de seconde dont il faut décaler la vidéo.

    Note : La définition de la valeur du décalage de temps n'a pas encore été finalisée dans la spécification HTML5 et est donc sujette aux changements.

    Exemples

    <!-- Vidéo simple -->
    <video src="videofile.ogg" autoplay poster="posterimage.jpg">
      Nous sommes désolés, votre navigateur ne semble pas supporter 
      les vidéos intégrés. Vous pouvez toujours <a href="videofile.ogg">la télécharger</a>
      et la visionner avec votre lecteur vidéo préféré !
    </video>
    
    <!-- Video avec sous-titres -->
    <video src="foo.ogg">
      <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
      <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
    </video>
    

    Le premier exemple lance une vidéo, dès que cela est possible (suffisament de données ont été téléchargées pour permettre une lecture ininterrompue). Jusqu'à ce que la vidéo soit lancée, l'image "posterimage.jpg" est affichée.

    Le second exemple permet à l'utilisateur de choisir entre différents sous-titres.

    Support côté serveur

    Si le type MIME de la vidéo n'est pas paramétré correctement sur le serveur, la vidéo pourrait ne pas être affichée ou un rectangle gris avec une croix sera affiché (si JavaScript est activé).

    Si vous servez vos vidéos en Ogg Theora, vous pouvez résoudre ce problème sur les serveurs web Apache en ajoutant l'extension utilisée par vos fichiers vidéo (".ogm", ".ogv", or ".ogg" étant les plus communes) au type MIME "video/ogg" grâce au fichier "mime.types" contenu à l'emplacement "/etc/apache" ou grâce à une configuration directive "AddType" dans le fichier httpd.conf.

    AddType video/ogg .ogm
    AddType video/ogg .ogv
    AddType video/ogg .ogg
    

    Si vous servez des vidéos en WebM, vous pouvez résoudre ce problème sur les serveurs web Apache en ajoutant l'extension utilisée par vos fichiers vidéo (".webm" étant la plus commune) au type MIME "video/webm" grâce au fichier "mime.types" contenu à l'emplacement "/etc/apache" ou grâce à une configuration directive "AddType" dans le fichier httpd.conf.

    AddType video/webm .webm
    

    L'hôte web peut fournir une interface simple pour configurer les changements éventuels de type MIME.

    embedded-content-0.html#video

    Spécifications

    Spécification Statut Commentaires
    WHATWG HTML Living Standard Living Standard  
    HTML5 Candidate Recommendation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple 3.0 3.5 (1.9.1) 9.0 10.5 3.1
    Attribut autoplay 3.0 3.5 (1.9.1) 9.0 10.5 3.1
    Attribut buffered ? 4.0 (2.0) ? Yes ?
    Attribut controls 3.0 3.5 (1.9.1) 9.0 10.5 3.1
    Attribut loop 3.0 11.0 (11.0) 9.0 10.5 3.1
    Attribut muted ? 11.0 (11.0) ? Yes ?
    Propriété played ? 15.0 (15.0) ? Yes ?
    Attribut poster 3.0 3.6 (1.9.2) 9.0 10.5 3.1
    Attribut preload 3.0 4.0 (2.0) 9.0 Yes 3.1
    Attribut src 3.0 3.5 (1.9.1) 9.0 10.5 3.1
    Attribut crossorigin ? 12.0 (12.0) ? ? ?
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple ? 1.0 (1.0) ? ? ?
    Attribut autoplay ? 1.0 (1.0) ? ? iOS6 seulement
    Attribut buffered ? 4.0 (2.0) ? ? ?
    Attribut controls ? 1.0 (1.0) ? ? ?
    Attribut loop ? 11.0 (11.0) ? ? ?
    Attribut muted ? 11.0 (11.0) ? ? ?
    Propriété played ? 15.0 (15.0) ? ? ?
    Attribut poster ? 1.0 (1.0) ? ? ?
    Attribut preload ? 4.0 (2.0) ? ? ?
    Attribut src ? 1.0 (1.0) ? ? ?
    attribut crossorigin ? 12.0 (12.0) ? ? ?

    Voir également

    Étiquettes et contributeurs liés au document

    Contributeurs ayant participé à cette page : tregagnon, BenoitL, teoli, SphinxKnight, mekal
    Dernière mise à jour par : tregagnon,