Ajout d’un contrôle vidéo HTML5 à votre page Web

Windows Internet Explorer 9 prend désormais en charge la vidéo HTML5.Grâce à la vidéo HTML5, vous pouvez incorporer un lecteur vidéo doté de toutes les fonctionnalités dans votre page Web, sans recourir à un plug-in tiers ou même à JavaScript.

Comment débuter ?

Dans sa forme la plus élémentaire, l’ajout d’un lecteur vidéo dans votre page Web avec l’élément video HTML5 se fait au moyen d’une seule et unique ligne de code HTML. Ajoutez l’attribut controls pour permettre aux utilisateurs de contrôler la lecture vidéo. D’autres attributs peuvent servir à définir le fichier source, ajouter une image d’espace réservé ou bien démarrer la lecture vidéo automatiquement. Comme pour la plupart des éléments HTML, vous pouvez utiliser des feuilles de style en cascade (CSS) pour définir le style de l’élément et le positionner.

La syntaxe de l’élément HTML5 est la suivante :


<video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video> 


Pour une seule ligne de code, l’exemple qui suit vous permet d’accomplir plusieurs tâches. L’attribut src pointe sur le fichier vidéo à lire. L’attribut src propose au choix un moyen sur deux de définir du contenu pour l’élément video. Pour lire votre vidéo, affectez l’attribut src à l’URL d’un fichier vidéo.

L’attribut controls demande au navigateur d’afficher les contrôles de lecture intégrés. Le mode de fonctionnement et l’apparence des contrôles intégrés peuvent varier d’un navigateur à l’autre. Vous devez, au minimum, voir les contrôles de lecture et de pause, une barre de progression ou des boutons permettant d’avancer ou de reculer dans la vidéo, ainsi qu’un compteur de temps. Lorsqu’une vidéo est en cours de lecture, les contrôles sont généralement masqués, puis réapparaissent lorsque l’utilisateur pointe avec sa souris sur le lecteur.

Enfin, l’attribut autoplay est un attribut booléen qui provoque le démarrage du lecteur dès que celui-ci est chargé.

Quels attributs puis-je utiliser avec un élément video ?

L’élément video prend en charge de multiples attributs qui contrôlent la lecture et l’affichage vidéo. Ce tableau souligne les attributs vidéo de base. Les attributs booléens sont considérés comme des attributs de l’élément video et ont la valeur "true" s’ils sont présents et la valeur "false" s’ils sont absents.

AttributDescription
src Chaîne représentant une URL pointant sur un fichier vidéo.
controls Attribut booléen activant une série de contrôles de lecture intégrés. Ces contrôles incluent traditionnellement les fonctions de lecture, de pause, de recherche et de réglage du volume. Internet Explorer 10 affiche aussi un contrôle à l’aide duquel il est possible de choisir plusieurs pistes audio et textuelles.
poster Chaîne représentant une image d’espace réservé affichée dans le lecteur vidéo. L’image poster s’affiche lorsqu’une vidéo n’est pas disponible, soit parce que la source n’est pas définie à cette étape, soit parce que le contenu est toujours en cours de chargement.
loop Attribut booléen qui lit la vidéo à plusieurs reprises jusqu’à ce que vous appuyiez sur le bouton Pause dans les contrôles ou appeliez la méthode pause à partir du script.
muted Attribut booléen qui lit la vidéo avec la piste audio désactivée.
autoplay Attribut booléen qui démarre automatiquement la lecture de la vidéo lorsque le contenu mis en tampon pour le lecteur est suffisant.
preload Attribut booléen définissant un indice sur le volume de mise en tampon requis.
height Définit en pixels la hauteur du lecteur vidéo.
width Définit en pixels la largeur du lecteur vidéo.

 

Remarque  Si vous définissez une seule dimension pour le lecteur vidéo (par exemple, la hauteur), le lecteur vidéo adopte cette dimension pour la vidéo et met l’autre dimension à l’échelle en respectant les proportions du contenu vidéo. Si vous définissez ces deux dimensions dans des proportions non conformes au contenu vidéo, le lecteur met la dimension la plus proche à l’échelle mais conserve ses proportions. La vidéo apparaîtra centrée horizontalement ou verticalement avec un espace vide sur l’un des côtés.

L’exemple qui suit lit une vidéo, affiche un poster jusqu’à l’affichage du contenu et lit à plusieurs reprises une vidéo à l’aide des contrôles de lecture.


<video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >
HTML5 Video is required for this example
</video> 


Les attributs qui précèdent peuvent être définis dans les éléments video au format HTML mais plusieurs autres options sont disponibles lorsque vous utilisez JavaScript. Pour plus d’informations, voir Utilisation de JavaScript pour contrôler le lecteur vidéo HTML5.

Comment prendre en charge plusieurs formats ?

L’élément video vous permet seulement de définir un attribut src à la fois. Cette méthode fonctionne bien quand vous savez que vous allez utiliser un seul format de fichier. Néanmoins, pour prendre en charge plusieurs formats de fichiers et plusieurs navigateurs, vous pouvez utiliser l’élément source.

L’élément source agit de concert avec l’élément video pour offrir une solution la mieux adaptée au format du contenu vidéo. Cela signifie que vous pouvez affecter plusieurs formats que le lecteur vidéo HTML5 choisit alors le format le plus compatible. En règle générale, il s’agit d’un fichier .mp4 pour Windows Internet Explorer ou d’un format .ogg/.ogv pour d’autres navigateurs. Cet exemple affiche un élément video avec trois formats de fichiers possibles :


 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>/
 </video>


Dans cet exemple, il existe trois formats vidéo répertoriés — mp4, webm et ogg. En fonction du navigateur, l’élément video choisit celui qu’il est capable de lire. S’il ne peut pas lire l’un des formats ou si la vidéo HTML5 n’est pas prise en charge, il échoue et affiche le texte contenu entre les balises video. Cette méthode de secours peut être employée pour afficher un message ou peut inclure un lecteur intégré.

Que se passe-t-il sur les anciens navigateurs ?

L’ajout d’une vidéo à une page Web sans plug-ins ou lecteurs externes convient aux utilisateurs qui exécutent Internet Explorer 9 ou Internet Explorer 10 dans la nouvelle interface utilisateur Windows ou à des utilisateurs d’appareils mobiles qui ne prennent pas en charge les plug-ins. En revanche, cela peut limiter votre public aux utilisateurs de navigateurs modernes. Les éléments video et audio HTML5 vous permettent d’insérer du texte ou du code entre les balises exécutées seulement si HTML5 n’est pas pris en charge dans le navigateur d’un utilisateur.

Remarque  Les éléments video et audio sont différents de l’élément canvas puisque le code inséré entre les éléments est exécuté uniquement lorsque les deux éléments ne sont pas pris en charge. L’élément canvas est unique dans ce code car les balises, même si elles ne sont pas affichées, sont en réalité exécutées, même si l’élément canvas n’est pas pris en charge. L’objet DOM Canvas Shadow permet aux développeurs de garantir la prise en charge de l’accessibilité pour les lecteurs d’écran et d’autres périphériques. Pour plus d’informations, voir Élément canvas HTML5 et objet DOM Canvas Shadow.

L’exemple qui suit est similaire au dernier exemple, à ceci près qu’une balise object a été ajoutée pour exécuter Adobe Flash Player et le prendre en charge dans des navigateurs antérieurs.


 <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>     
   <object>
     <embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
   </object>        
   HTML5 Video is required for this example
 </video>


Dans cet exemple, si le navigateur prend en charge la vidéo HTML5, il soumet à l’essai les formats vidéo présentés. Si la vidéo HTML5 n’est pas prise en charge, il charge Flash Player à l’aide des balises object et embed.

Une autre option de secours consiste simplement à fournir un lien vers du contenu vidéo comme le montre l’exemple suivant :


HTML5 Video is required for this example. 
<a href="demo.mp4">Download the video</a> file. 


Pour plus d’informations sur les techniques de secours avec JavaScript dans l’application du Windows Store, voir Plug-ins et contrôles ActiveX.

Puis-je ajouter un peu de style ?

Vous pouvez améliorer le style de votre lecteur vidéo HTML5 à l’aide de CSS afin de mieux l’intégrer dans le design de votre page Web. Vous pouvez définir les propriétés height et width, définir des arrière-plans, des bordures et la propriété position ou bien contrôler la propriété visibility des éléments video à l’aide de CSS.

La propriété z-index de CSS permet de superposer des images, du texte ou même d’autres vidéos sur un élément video. Un exemple illustrant cette possibilité est la fonctionnalité d’incrustation d’images (PiP) qui superpose une petite vidéo sur une plus grande, sur le même écran.

L’incrustation d’images est une technique souvent employée pour afficher du contenu associé, tel que des diagrammes dans un événement sportif ou un interprète utilisant le langage des signes. L’exemple qui suit utilise CSS pour placer une petite vidéo sur une vidéo de taille plus importante. Il a également recours à CSS pour définir la largeur du lecteur vidéo et place une bordure en couleur autour des images insérées.


    <style type="text/css">       
    #Video1
    {
     position:absolute;
     top: 50px;
     left:0px;        
     width:1000px;       
     border:2px solid blue;
     display:block;
     z-index:99;
     }
        
   #Video2
    {
     position:absolute;
     top:80px;
     left:60px;
     width:300px;
     border:2px solid red;        
     z-index:100;
    }
    
    </style>
</head>
    <body>        
       <video id="Video1" controls loop autoplay >
           <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />           
       </video>
       
       <video id="Video2" muted autoplay controls >
           <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
           HTML5 Video not supported
       </video>             


La propriété z-index vous permet de modifier l’ordre d’affichage. Normalement, les éléments dans une page Web apparaissent dans l’ordre dans lequel ils sont créés. Si un élément chevauche un autre, le dernier élément rendu sera pleinement visible. La propriété z-index de la deuxième trame vidéo est définie sur 100 pour s’assurer qu’elle constitue l’élément au plus haut niveau (en supposant qu’il n’existe pas plus de 100 éléments créés avant la vidéo). La position de la deuxième trame vidéo dépend de la taille des vidéos lues et du nombre d’éléments dans la page.

D’autres propriétés CSS peuvent être utilisées, notamment la propriété transform pour faire pivoter une image ou la propriété borderRadius pour créer des coins arrondis dans l’élément video comme le montre l’exemple suivant. Pour plus d’informations, voir les pages de référence consacrées à CSS (Cascading Style Sheets).


<html>
  <head>
    <title>Rotating a video</title>
    <style type="text/css">
   /* Set basic style for video */     
    #theVideo  
   {
        display:block;
        position:absolute;
        left:200px;
        top:200px;
        border: 2px solid red;
        border-radius: 20px;  
    }   
    /* Light up the image as a button, change cursor */
    #rotateVideo:hover
    {
        border:2px solid green;
        cursor: pointer;                
     }
        
    </style>
    <script>
        //  When the HTML elements load, call init()
        document.addEventListener("DOMContentLoaded", init, false);
       
        //  Rotate the video by 30degrees when image is clicked
        function init() {
          var video = document.getElementById("theVideo");
          if (video) {
            var rotateVal = 0;       //  Global variable to hold current rotation value
            document.getElementById("rotateVideo").addEventListener("click", function () {
              rotateVal = (rotateVal += 30) % 360;  // Calculate the next value, but keep between 0 and 360
              var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
              document.getElementById("theVideo").style.msTransform = temp;  // Set the style
            }, false);
          }
        }
    </script>
   
  </head>
  <body>
    <img src="rotate.png" id="rotateVideo" alt="Rotate button" title="Click to rotate 30 degrees" role="button"/>
    <video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" id="theVideo" controls >
      This browser or mode doesn't support HTML5 video.
    </video>
  </body>
</html>


Et maintenant ?

Dans cette rubrique, nous avons démontré comment exploiter une ligne unique de code HTML pour ajouter un contrôle de lecteur vidéo muni de toutes les fonctionnalités à votre page Web. Vous avez découvert comment prendre en charge plusieurs formats vidéo sur plusieurs navigateurs, ainsi qu’un exemple de secours simple pour la prise en charge des navigateurs qui ne prennent pas en charge la vidéo HTML5.

Dans la rubrique Utilisation de JavaScript pour contrôler le lecteur vidéo HTML5, vous apprendrez à vous servir de JavaScript pour ajouter des contrôles externes à des fins de lecture, vérifier la compatibilité avec d’autres formats de fichiers et enfin, à contrôler le volume et la vitesse de lecture.

Informations de référence sur les API

HTML5 Audio and Video

Exemples et didacticiels

Utilisation de JavaScript pour contrôler le lecteur vidéo HTML5
Utilisation d’événements vidéo HTML5
Exemple de piste de texte synchronisé en HTML5
Rendre vos vidéos accessibles à l’aide de pistes de texte synchronisé

Démonstrations du site Internet Explorer Test Drive

City of Videos
HTML5 Video Caption Maker
IE10 Video Captioning
Video Format Support
Video Kaleidoscope
IMDb Video Panorama

Billets IEBlog

HTML5 et la vidéo Web : questions pour les experts de la part de la communauté
Sous-titrage vidéo HTML5

Spécification

HTML5 : Section 4.8.6

Rubriques associées

Comment incorporer une vidéo avec HTML5
Lire vos vidéos HTML5 sur des appareils mobiles

 

 

Afficher:
© 2015 Microsoft