Wie kann ich Bilder und Videos in HTML5 einbetten?

Wie kann ich Bilder und Videos in HTML5 einbetten. Für Bilder gibt das Attribut

die URL oder Pfad des Bildes an, während das Attribut

alternativen Text für Zugangs- und Suchmaschinen bietet. Der <img> Text sollte den Inhalt des Bildes präzise beschreiben. Zum Beispiel: <video> src alt Für Videos können Sie mit dem alt -Tag mehrere Videoquellen mithilfe des

-Tags angeben, um verschiedene Formate (wie MP4, Webm, OGG) zu unterstützen, um eine breitere Browserkompatibilität zu gewährleisten. Das Attribut

<img src="myimage.jpg" alt="A beautiful sunset over the ocean">

fügt integrierte Spiel-, Pause- und Lautstärkeregler hinzu. Sie können auch ein Posterbild mit dem Attribut

angeben, das angezeigt wird, bevor das Video abgespielt wird. Hier ist ein Beispiel: <video> <source> controls Der Text "Ihr Browser unterstützt das Video -Tag nicht" als Fallback für Browser, die das poster -Element nicht unterstützen. Denken Sie daran,

,

<video width="320" height="240" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

und

durch die tatsächlichen Dateipfade oder URLs zu ersetzen. <video> "myimage.jpg" Welche HTML -Tags werden benötigt, um Bilder und Videos anzuzeigen? Seine wesentlichen Attribute sind "myvideo.mp4" (die Quelle des Bildes) und "myvideo.webm" (alternativer Text). Zu den optionalen Attributen gehören

,

,

(für das CSS -Styling) und andere zur Steuerung der Bildanzeige. Innerhalb des

-Tags verwenden Sie normalerweise das <img> Tag, um mehrere Videoquellen mit unterschiedlichen Formaten (src Attribut) anzugeben, um die Kompatibilität für verschiedene Browser zu gewährleisten. Attribute wie alt, width, height (um Player -Steuerelemente hinzuzufügen), style (ein Standbild zum Anzeigen vor der Wiedergabe) und

(um die Wiedergabe automatisch zu starten) werden häufig verwendet. Denken Sie daran, eine Fallback -Nachricht wird im

-Tag für Browser empfohlen, die das HTML5 -Videoelement nicht unterstützen. Die effektivste Methode ist die Verwendung von CSS. Verwenden Sie anstatt feste <video> und <video> Attribute in der HTML anzugeben, um die Größe zu steuern. Setzen Sie für Bilder die <source> auf 100% und type, um das Seitenverhältnis aufrechtzuerhalten: width

<img src="myimage.jpg" alt="A beautiful sunset over the ocean">

Für Videos können Sie ähnliche CSS auf das <video> -Element selbst anwenden:

<video width="320" height="240" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Alternativ können Sie das auf 100% festgelegte width -Treiberte verwenden und den Browser die Höhe automatisch verarbeiten lassen. Diese Methode kann jedoch manchmal das Seitenverhältnis abhängig vom Browser stören. Die Verwendung von max-width und height: auto wird im Allgemeinen für die Aufrechterhaltung des Seitenverhältnisses bevorzugt. Die Verwendung von CSSs display: block; sorgt für eine ordnungsgemäße Ausrichtung und verhindert unerwartete Abstandsprobleme. Hier sind einige Best Practices:

Bildoptimierung:

Verwenden Sie geeignete Bildformate (Webp für überlegene Komprimierung, wenn sie unterstützt werden, JPEG für Fotografien, PNG für Bilder mit Transparenz), Kompressbilder mit Tools wie Tinypng oder Bildoptimer, um Dateien ohne signifikante Qualitätsverluste zu reduzieren. Erwägen Sie, ansprechende Bilder (

Element oder
• Attribut in Tag) zu verwenden, um verschiedene Bildgrößen basierend auf dem Gerät des Benutzers zu erstellen. Verwenden Sie Videokomprimierungswerkzeuge, um die Dateigröße zu reduzieren. Erwägen Sie, mehrere Videoauflösungen mithilfe des -Tags innerhalb des <picture> -Tags zu verwenden, um verschiedene Bandbreiten zu richten. Dies bedeutet, dass nur Bilder und Videos geladen werden, wenn sie im Ansichtsfenster sichtbar sind. Dies reduziert die Ladezeit der Anfangsseite erheblich. Dies kann mit Attributen wie srcset in den <img> und
-Tags (unterstützt von den meisten modernen Browsern) oder mit JavaScript -Bibliotheken erreicht werden. Konfigurieren Sie die geeigneten Caching -Header auf Ihrem Webserver, damit Browser Bilder und Videos zwischenspeichern und die Notwendigkeit reduzieren müssen, sie wiederholt herunterzuladen.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder und Videos in HTML5 einbetten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!