So verwenden Sie das Quell -Tag mit Video und Audio in HTML

Mit dem -Tag wird mehrere Medienquellen in

Das <source></source> -Tag in HTML wird in den Elementen <video></video> und <audio></audio> verwendet, um mehrere Mediendateien anzugeben. Dies hilft Browsern, das am besten unterstützte oder am besten geeignete Format zu wählen und die Kompatibilität über verschiedene Geräte und Browser hinweg zu verbessern.

Warum das <source></source> Tag verwenden?

Nicht alle Browser unterstützen die gleichen Medienformate. Zum Beispiel unterstützen einige MP4, andere Webm oder OGG. Durch die Bereitstellung mehrerer Quellen stellen Sie sicher, dass Ihre Medien in einer breiteren Plattformen spielen. Mit dem <source></source> Tag können Sie diese Alternativen auflisten.

Verwenden Sie <source></source> mit dem <video></video> Element

Sie können mehrere <source></source> -Tags in ein <video></video> -Element aufnehmen, die jeweils auf ein anderes Videodateiformat hinweisen.

 <Videokontrollen>
  <source src = "move.mp4" type = "Video/mp4">
  <source src = "move.webm" type = "Video/webm">
  <source src = "move.ogg" type = "Video/ogg">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

• Der Browser überprüft jede Quelle in der Reihenfolge und spielt die erste, die er unterstützt.
• Das type -Attribut hilft dem Browser, zu entscheiden, ob es die Datei abspielen kann, ohne sie zuerst herunterzuladen.
• Fügen Sie immer Fallback -Text (wie "Ihr Browser nicht unterstützt ...") für ältere Browser an.

Gemeinsame Video -Mime -Typen:

• video/mp4 für MP4 -Dateien
• video/webm für Webm -Dateien
• video/ogg für OGG -Dateien

Verwenden Sie <source> mit dem Element <audio>

Das gleiche Prinzip gilt für Audio. Verwenden Sie mehrere <source> -Tags, um verschiedene Audioformate bereitzustellen.

 <Audiokontrollen>
  <Source Src = "Song.mp3" type = "audio/mpeg">
  <Source Src = "Song.ogg" type = "audio/ogg">
  <Source Src = "Song.wav" type = "audio/wav">
  Ihr Browser unterstützt das Audioelement nicht.
</audio>

• Browser spielen das erste unterstützte Audioformat.
• MP3 wird weithin unterstützt, aber OGG und WAV sind Alternativen für bestimmte Fälle.

Häufige Audio -Mime -Typen:

• audio/mpeg für MP3
• audio/ogg für Ogg Vorbis
• audio/wav für WAV -Dateien

Tipps für die besten Ergebnisse

• Auftragsangelegenheiten: Listen Sie zuerst das am häufigsten unterstützte Format (wie MP4 oder MP3) auf, gefolgt von Alternativen.
• Verwenden Sie das Typattribut type : Es verhindert unnötige Downloads, indem die Browserkompatibilität im Voraus überprüft wird.
• Beachten Sie die Dateigrößen: Erwägen Sie, kleinere Formate für mobile Benutzer anzubieten, wenn Bandbreite ein Problem darstellt.
• Testen Sie in Browsern: Überprüfen Sie die Wiedergabe immer in Chrome, Firefox, Safari und Edge.

Optionale Attribute in <source>

Neben src und type können Sie auch verwenden:

• media - Gibt eine Medienabfrage an (z. B. für reaktionsschnelle Videoquellen basierend auf der Bildschirmgröße)

Beispiel:

 <Source src = "small.mp4" type = "Video/mp4" media = "(max-Width: 600px)">
<Source Src = "Large.mp4" Typ = "Video/mp4" media = "(min-width: 601px)">

Auf diese Weise können Sie verschiedene Videos basierend auf der Bildschirmgröße der Geräte servieren.

Im Grunde genommen gibt Ihnen das <source></source> -Tag die Kontrolle und Flexibilität bei der Bereitstellung von Medien. Verwenden Sie es, um mehrere Formate zu unterstützen und die Benutzererfahrung über Geräte hinweg zu verbessern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Quell -Tag mit Video und Audio in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!