Verwenden Sie die Elemente und <video>, um HTML Audio und Video hinzuzufügen. 1) Betten Sie das Audio mithilfe des <audio> -Elements ein und stellen Sie sicher, dass Steuerattribute und alternativer Text einbezogen werden. 2) Einbetten Sie Video mit <video> Elementen ein, setzen Sie die Breite und die H?henattribute und geben Sie mehrere Videoquellen an, um die Kompatibilit?t zu gew?hrleisten. 3) Untertitel hinzufügen, um die Zug?nglichkeit zu verbessern. 4) Optimieren Sie die Leistung mit adaptivem Bitrate -Streaming und verz?gerten Belastung. 5) Vermeiden Sie eine automatische Wiedergabe, es sei denn, Sie steuern die Benutzersteuerung und eine klare Schnittstelle.

Sie m?chten also Ihre Webseiten mit Audio und Video auferlegen, oder? Lassen Sie uns mit den Best Practices und Beispielen für das Hinzufügen von Multimedia zu HTML eintauchen, und ich werde auf dem Weg einige pers?nliche Erkenntnisse teilen.

Wenn es darum geht, Audio und Video in HTML einzubetten, gibt es einige wichtige überlegungen. Sie m?chten, dass Ihre Inhalte zug?nglich, leistungsf?hig und benutzerfreundlich sind. Es geht nicht nur darum, ein Video oder ein Audioelement auf Ihre Seite zu schlagen. Es geht darum, ein nahtloses Erlebnis für Ihr Publikum zu schaffen.

Beginnen wir mit Audio. Ich erinnere mich, als ich zum ersten Mal versuchte, einen Audio zu einer Website zu verleihen. Es war ein Chaos-musikalische Musik, die Besucher wegbrachte. Heutzutage haben wir bessere Werkzeuge und Praktiken. Das Element <audio></audio> ist Ihr Anlaufpunkt für den Einbetten von Sound. Hier ist ein einfaches Beispiel:

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

Beachten Sie das Attribut controls ? Das ist grausam. Es gibt den Benutzern die M?glichkeit, die Lautst?rke zu spielen, zu pausieren und anzupassen und ihre Vorlieben zu respektieren. Geben Sie auch immer Fallback -Text für Browser an, die das Element nicht unterstützen.

Lassen Sie uns nun über Video sprechen. Video kann etwas komplexer sein, aber es ist auch ansprechender. Das <video> -Element ?hnelt <audio> , jedoch mit mehr Optionen. Hier ist ein einfaches Setup:

 <Video width = "320" Height = "240" Steuerelemente>
  <source src = "my-video.mp3" Typ = "Video/mp4">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

Das Einstellen der width und height hilft dem Browser -Reservenraum für das Video und verbessert das Layout. Das Attribut controls ist auch hier für die Benutzersteuerung von wesentlicher Bedeutung.

Eine Fallstrick, die mir begegnet ist, ist die Berücksichtigung einer unterschiedlichen Browserunterstützung nicht. Nicht alle Browser spielen gut mit allen Videoformaten. Um dies zu mildern, k?nnen Sie mehrere Quellen bereitstellen:

 <Videokontrollen>
  <Source Src = "my-video.mp4" Typ = "Video/mp4">
  <source src = "my-video.webm" Typ = "Video/webm">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

Auf diese Weise verwendet der Browser das erste, das er erkennt, um eine breitere Kompatibilit?t zu gew?hrleisten.

Barrierefreiheit ist ein weiterer grausamer Aspekt. Sie sollten immer Untertitel oder Transkripte für Ihre Videos einfügen. Dies hilft nicht nur Menschen mit H?rst?rungen, sondern verbessert auch die SEO. Hier erfahren Sie, wie Sie Bildunterschriften hinzufügen:

 <Videokontrollen>
  <Source Src = "my-video.mp4" Typ = "Video/mp4">
  <Track src = "captions.vtt" sort = "captions" srclang = "en" label = "englisch">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

Leistung ist ein weiterer Bereich, in dem ich viele Entwickler gesehen habe. Gro?e Videodateien k?nnen Ihre Seitenladezeiten verlangsamen. Um optimiert zu werden, sollten Sie das adaptive Bitrate -Streaming verwenden. Dienste wie YouTube oder Vimeo k?nnen dies für Sie für Sie erledigen, oder Sie k?nnen Technologien wie HLS oder MPEG-DaHash für selbst gehostete Inhalte verwenden.

Ein cooler Trick, den ich verwendet habe, ist faul Laden. Dies kann die Ladezeiten der Anfangsseiten erheblich verbessern, insbesondere für inhaltlich schwere Websites. So k?nnen Sie faules Laden für Videos implementieren:

 <Video-Steuerelemente Preload = "Keine" Daten-src = "my-video.mp4">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

<Script>
  document.addeventListener ("DomContentLode", function () {
    var lazyvideos = [] .slice.call (document.querySelectorAll ("Video [preload = &#39;none&#39;]"));

    if ("intersectionObserver" im Fenster) {
      lazyvideoobserver = new IntersectionObServer (Funktion (Eintr?ge, Beobachter) {
        Eintr?ge.foreach (Funktion (Video) {
          if (Video.issintersecting) {
            für (var source in Video.target.children) {
              var videosource = Video.target.Children [Quelle];
              if (typeof videosource.tagname === "String" && videoSource.tagname === "Quelle") {
                videosource.src = videosource.dataset.src;
              }
            }

            Video.Target.load ();
            Video.Target.ClassList.remove ("Lazy");
            Lazyvideoobserver.unobserve (Video.Target);
          }
        });
      });

      Lazyvideos.foreach (Funktion (Lazyvideo) {
        Lazyvideoobserver.observe (Lazyvideo);
      });
    }
  });
</script>

Dieser Ansatz verz?gert das Laden des Videos, bis es in das Ansichtsfenster eintritt, die Bandbreite speichert und die Benutzererfahrung verbessert.

Wenn es um Best Practices geht, ist eine Sache, die ich immer betone, die Benutzerkontrolle. Spielen Sie niemals automatisch Videos oder Audio ohne einen guten Grund-nichts frustriert die Benutzer mehr als unerwartetes Ger?usch. Wenn Sie automatisch spielen müssen, stellen Sie sicher, dass es standardm??ig ged?mpft ist:

 <Video Autoplay ged?mpft>
  <Source Src = "my-video.mp4" Typ = "Video/mp4">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

Eine weitere Best -Praxis besteht darin, klare, sichtbare Kontrollen bereitzustellen. Manchmal k?nnen benutzerdefinierte Steuerelemente verlockend sein, aber sie führen h?ufig zu Problemen mit Zug?nglichkeit. Halten Sie sich an die nativen Steuerelemente, es sei denn, Sie haben einen überzeugenden Grund, etwas anderes zu tun.

Erw?gen Sie in Bezug auf die Optimierung die Verwendung von Videoplakaten. Ein Posterbild kann angezeigt werden, bevor das Video beginnt, was ein erheblicher Leistungsschub sein kann:

 <Video poster = "poster.jpg" Steuerelemente>
  <Source Src = "my-video.mp4" Typ = "Video/mp4">
  Ihr Browser unterstützt das Video -Tag nicht.
</Video>

Testen Sie schlie?lich immer Ihr Audio und Video auf verschiedenen Ger?ten und Browsern. Was auf Ihrem Desktop perfekt funktioniert, spielt auf dem Handy m?glicherweise nicht gut. Ich habe das auf die harte Tour gelernt und es ist eine Lektion, die ich gerne weitergeben kann.

Abschlie?end kann das Hinzufügen von Audio und Video zu HTML Ihre Webseiten ver?ndern und sie ansprechender und interaktiver machen. Wenn Sie diese Best Practices befolgen, gemeinsame Fallstricke vermeiden und moderne Techniken nutzen, k?nnen Sie ein Multimedia -Erlebnis schaffen, das Ihre Benutzer begeistert. Denken Sie daran - denken Sie an ihre Vorlieben, optimieren Sie die Leistung und halten Sie immer die Zug?nglichkeit im Auge.

Das obige ist der detaillierte Inhalt vonHinzufügen von Audio und Video zu HTML: Best Practices und Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!