Attribute der Multimedia-Elemente

5.1 Zusätzliche Attribute

Multimedia-Elemente in HTML5, wie <audio> und <video>, bieten eine Vielzahl von Attributen zur Steuerung der Wiedergabe von Multimedia-Inhalten. Das Verständnis dieser Attribute ermöglicht es, interaktivere und benutzerfreundlichere Webseiten zu erstellen, die an die verschiedenen Bedürfnisse der Benutzer angepasst werden können. Wir werden jetzt die zusätzlichen Attribute, die für die Elemente <audio> und <video> verfügbar sind, im Detail betrachten.

Attribut crossorigin

Das Attribut crossorigin gibt an, wie der Browser Anfragen zu Multimedia-Dateien, die sich auf anderen Domains befinden, behandeln soll. Dieses Attribut kann zwei Werte annehmen:

• anonymous: Die Anfrage wird ohne Einschluss von Anmeldeinformationen (Cookies, Authentifizierungsheader usw.) ausgeführt.
• use-credentials: Die Anfrage wird mit Einschluss von Anmeldeinformationen ausgeführt.

Beispiel:

    
      <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>
    
  

Source-Attribute <source>

Die Tags <source> werden innerhalb der Elemente <audio> und <video> verwendet, um mehrere Quellen für Multimedia-Inhalte anzugeben. Dies hilft, die Kompatibilität zwischen verschiedenen Browsern sicherzustellen, da unterschiedliche Browser unterschiedliche Formate unterstützen können.

Beispiel:

    
      <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>
    
  

Attribute und Eigenschaften für Untertitel und Textspuren

HTML5 bietet die Möglichkeit, Untertitel, Textspuren und Beschreibungen mit dem Tag <track> hinzuzufügen. Dieses Element unterstützt mehrere Arten von Textspuren, wie Untertitel, Beschreibungen und Kapitel.

Beispiel:

    
      <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 Steuerung von Multimedia-Elementen mit JavaScript

Die Elemente <audio> und <video> bieten ein API zur Steuerung der Wiedergabe mittels JavaScript. Dadurch lassen sich benutzerdefinierte Steuerungselemente erstellen und komplexe Wiedergabeszenarien umsetzen.

Beispiel:

    
      <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;
      }
    
  

In diesem Beispiel ermöglichen die Buttons die Wiedergabe, Pause und das Stoppen des Videos mittels JavaScript.

5.3 Ereignisse der Multimedia-Elemente

Die Elemente <audio> und <video> unterstützen eine Vielzahl von Ereignissen, die es ermöglichen, die Wiedergabe zu verfolgen und auf Änderungen im Wiedergabestatus zu reagieren.

Wichtige Ereignisse:

• play: tritt auf, wenn die Wiedergabe startet
• pause: tritt auf, wenn die Wiedergabe pausiert wird
• ended: tritt auf, wenn die Wiedergabe endet
• timeupdate: tritt periodisch auf, wenn sich die aktuelle Wiedergabezeit ändert

Beispiel zur Verwendung von Ereignissen:

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

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

      video.addEventListener('play', function() {
        console.log('Video started playing');
      });

      video.addEventListener('pause', function() {
        console.log('Video paused');
      });

      video.addEventListener('ended', function() {
        console.log('Video ended');
      });

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

Dieser Code zeigt, wie man die wichtigsten Ereignisse eines Multimedia-Elements verfolgen kann.

1

Umfrage/Quiz

Multimedia in HTML, Level 6, Lektion 5

Nicht verfügbar

Multimedia in HTML

Multimedia in HTML

Öffnen