Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie das Problem, dass MP4-Videos nicht mit dem Video-Tag auf H5-Webseiten abgespielt werden können

So lösen Sie das Problem, dass MP4-Videos nicht mit dem Video-Tag auf H5-Webseiten abgespielt werden können

little bottle
little bottleOriginal
2019-04-08 14:13:5223074Durchsuche

Warum kann das aufgezeichnete MP4-Video lokal abgespielt werden, das Video-Multimedia-Wiedergabe-Tag mit HTML5 kann jedoch nicht normal abgespielt werden, da nur ein Fortschrittsbalken und kein Bild angezeigt wird? Tatsächlich handelt es sich um ein Videokodierungsproblem. Obwohl es sich bei allen Formaten um MP4 handelt, bleibt mir nichts anderes übrig, als die Kodierung neu zu konvertieren.

Um zu vermeiden, dass alle auf das gleiche Problem stoßen, gebe ich Ihnen etwas Wissen über HTML5 über das <video>-Tag: Wann Verwenden des HTML4-Protokolls zum Erstellen einer Website. Wenn wir ein Video auf der Webseite abspielen möchten, müssen wir es mit Flash abspielen oder eine eingebettete Seite verwenden, um dies zu erreichen. Für HTML5 sind diese beiden Methoden sehr unpraktisch, da eine awesome <video> erscheint. Die Funktion dieses Tags besteht darin, die einfache Wiedergabe von Multimediadateien auf Webseiten zu ermöglichen.

Für die Wiedergabe eines Videos im HTML-Format ist nur ein Tag erforderlich:

Obwohl es viel weniger Code gibt, sind die Funktionen sehr solide. Dies ist eines der Highlights von HTML5!

Über die vom <video>-Tag unterstützten Videoformate und Kodierungen:

  • MP4 = MPEG 4-Datei verwendet H264-Videocodec und AAC-Audiocodec-Codecs

  • WebM = WebM-Dateien verwenden VP8-Videocodec und Vorbis-Audiocodec

  • Ogg = Ogg-Dateien verwenden Theora-Videocodec Decoder und Vorbis-Audiocodec

Anhand der obigen Informationen werden wir feststellen, dass es nur h264-codierte MP4-Videos (MPEG-LA-Unternehmen), VP8-codierte WebM-Format-Videos (Google-Unternehmen) und Theora-codierte Ogg-Format-Videos gibt (iTouch-Entwicklung) kann das HTML5-Tag <video> unterstützen.

Was passiert, wenn der Browser das Video-Tag nicht unterstützt?

Zum Beispiel unterstützen IE-Browser und ältere Browserversionen HTML5 nicht sehr gut. Was sollten wir tun, wenn Benutzer diese Browser verwenden, um unsere Webseiten mit Videos zu öffnen?

Wir können den Code so schreiben:

Auf diese Weise wird in Browsern, die HTML5 nicht unterstützen, die Meldung „Ihr Browser unterstützt die Wiedergabe dieses Videos nicht!“ angezeigt!

Erklärung der erweiterten Parameter des Video-Tags:

Das Videoelement ermöglicht mehrere Quellelemente. Das Quellelement kann verschiedene Videodateien verknüpfen. Der Browser verwendet das erste erkannte Format, sodass wir nur noch ein paar Videos in anderen Formaten vorbereiten müssen.

Verwendung:

  1. "movie.ogg" type="video/ogg"> ;

  2. "movie.mp4" type="video/mp4">

  3. Ihr Browser unterstützt dieses Videoformat nicht.

  1. Autoplay: Das Vorhandensein dieses Attributs bedeutet, dass das Video automatisch abgespielt wird, wenn es ist bereit. Verwendung: autoplay="autoplay"

  2. Steuerelemente: Das Vorhandensein dieses Attributs bedeutet, dass dem Benutzer Steuerelemente wie Wiedergabeschaltflächen usw. angezeigt werden. Verwendung: steuert= „Steuerelemente“

  3. Höhe: Höhe festlegen Breite: Breite festlegen

  4. Schleife: automatische Wiedergabe, Verwendung: Schleife="Schleife"

  5. preload: Das Video wird geladen und für die Wiedergabe vorbereitet, wenn die Seite geladen wird. Verwendung: preload="auto" – lädt das gesamte Video, wenn die Seite geladen wird; preload="meta" – lädt nur Metadaten nach dem Laden der Seite; preload="none" – Video wird beim Laden der Seite nicht geladen. < Ich werde das Video-Tag hier vorstellen. Ich glaube, dass jeder ein tiefes Verständnis für dieses Tag hat! [Empfohlener Kurs:

    Html5-Video-Tutorial
  6. ]

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass MP4-Videos nicht mit dem Video-Tag auf H5-Webseiten abgespielt werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn