Attributs des éléments multimédias

5.1 Attributs supplémentaires

Les éléments multimédias HTML5, tels que <audio> et <video>, fournissent de nombreux attributs pour gérer la lecture de contenu multimédia. Comprendre ces attributs permet de créer des pages web plus interactives et pratiques, qui peuvent s'adapter aux différents besoins des utilisateurs. Nous allons maintenant examiner en détail les attributs supplémentaires disponibles pour les éléments <audio> et <video>.

Attribut crossorigin

L'attribut crossorigin indique comment le navigateur doit gérer les requêtes pour les fichiers multimédias situés sur d'autres domaines. Cet attribut peut prendre deux valeurs :

• anonymous: la requête est effectuée sans inclusion des informations d'identification (cookies, en-têtes d'autorisation, etc.)
• use-credentials: la requête est effectuée avec l'inclusion des informations d'identification

Exemple :

    
      <audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
      <video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
    
  

Attributs des sources <source>

Les balises <source> sont utilisées à l'intérieur des éléments <audio> et <video> pour indiquer plusieurs sources de contenu multimédia. Cela aide à assurer la compatibilité inter-navigateurs, car différents navigateurs peuvent prendre en charge différents formats.

Exemple :

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

Attributs et propriétés pour les sous-titres et pistes textuelles

HTML5 offre la possibilité d'ajouter des sous-titres, des pistes textuelles et des descriptions à l'aide de la balise <track>. Cet élément prend en charge plusieurs types de pistes textuelles, telles que les sous-titres, les descriptions et les chapitres.

Exemple :

    
      <video controls width="600">
        <source src="videofile.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
        Your browser does not support the video element.
      </video>
    
  

5.2 Gestion des éléments multimédias avec JavaScript

Les éléments <audio> et <video> fournissent une API pour gérer la lecture avec JavaScript. Cela permet de créer des contrôles personnalisés et de mettre en œuvre des scénarios de lecture complexes.

Exemple :

    
      <video id="myVideo" src="videofile.mp4" controls></video>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      <button onclick="stopVideo()">Stop</button>
    
  

    
      const video = document.getElementById("myVideo");

      function playVideo() {
        video.play();
      }

      function pauseVideo() {
        video.pause();
      }

      function stopVideo() {
        video.pause();
        video.currentTime = 0;
      }
    
  

Dans cet exemple, les boutons permettent de lire, mettre en pause et arrêter la vidéo avec JavaScript.

5.3 Événements des éléments multimédias

Les éléments <audio> et <video> prennent en charge de nombreux événements qui permettent de suivre et de réagir aux changements d'état de la lecture.

Événements principaux :

• play: se produit lorsque la lecture commence
• pause: se produit lorsque la lecture est mise en pause
• ended: se produit lorsque la lecture se termine
• timeupdate: se produit périodiquement au fur et à mesure que le temps de lecture actuel change

Exemple d'utilisation des événements :

    
      <video id="myVideo" src="videofile.mp4" controls></video>
    
  

    
      const video = document.getElementById("myVideo");

      video.addEventListener('play', function() {
        console.log('Vidéo en cours de lecture');
      });

      video.addEventListener('pause', function() {
        console.log('Vidéo en pause');
      });

      video.addEventListener('ended', function() {
        console.log('Vidéo terminée');
      });

      video.addEventListener('timeupdate', function() {
        console.log('Temps actuel : ' + video.currentTime);
      });
    
  

Ce code montre comment suivre les événements principaux d'un élément multimédia.

1

Опрос

Multimédia en HTML,  6 уровень,  5 лекция

недоступен

Multimédia en HTML

Multimédia en HTML

Открыть