X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <source>

Das Tag <source> bestimmt einige multimediale Dateien in verschiedenen Formaten wie Audio und Video. Es ist für die Eigenschaft Cross-Browser notwendig: Der Browser kann aus zugänglichen Varianten das Format, das er unterstützt und ohne Probleme Audio- oder Videodateien abspielt, wählen.

In einem Dokument kann das Element <source> mehrmals für die Eingabe von alternativen Audio- und Videodateinen und die Eingabe von einigen Formaten verwendet werden.

Wenn das Tag <source> in den Tags <audio> oder <video> eingeschlossen ist, muss das Element vor dem Tag <track> und nach den multimedialen Dateien platziert weden. Im Element <picture> muss es vor dem Tag <img> platziert werden.

Syntax

Das Tag <source> wird ungepaart verwendet, kein Endtag ist notwendig.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Lorem Ipsum ist ein reiner Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker eine Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert geblieben ist.</p>
  </body>
</html>

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      video {
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Information über Video</p>
  </body>
</html>

Attribute

Attribut Wert Beschreibung
media media_query Es bezeichnet, dass die Datei für bestimmte Geräte angepasst ist.
sizes Es bezeichnet die erlaubte relative Größe der Quelle.
Eingefügt in HTML5.
src URL Es bezeichnet die URL-Adresse der Mediadatei.
srcset URL Es bestimmt die Bilder, die in verschiedenen Situationen (für verschiede Geräte) verwendet werden.
Eingefügt in HTML5.
type Wert für Video: video/ogg video/mp4 video/webm
Wert für Audio: audio/ogg audio/mpeg
Es bestimmt den MIME-Typ der Mediaquelle.

Das Tag <source> unterschtützt Globale Attribute und Globale Eventhandler.


Browser-Support

4+ 3.5+ 4+ 10.5+


Finden Sie das nützlich?

Ähnliche Artikel