Skip to main content

WIE MAN: Verwenden von HTML5 zum Anzeigen von Video in aktuellen Browsern - 2020

YouTube HTML5 Videos mit dem H.264 Codec in Ubuntu 14.04 im Firefox verfügbar machen [deutsch] (August 2020).

Inhaltsverzeichnis:

Anonim

Das HTML5-Video-Tag erleichtert das Hinzufügen von Video zu Ihren Webseiten. Obwohl es auf den ersten Blick einfach zu sein scheint, gibt es viele Dinge, die Sie tun müssen, um Ihr Video zum Laufen zu bringen. In diesem Lernprogramm werden Sie durch die Schritte zum Erstellen einer Seite in HTML5 geführt, auf der Video in allen modernen Browsern ausgeführt wird.

  • Hosten Ihres eigenen HTML5-Videos im Vergleich zu YouTube
  • Schneller Überblick über den Video-Support im Web
  • Erstellen und bearbeiten Sie Ihr Video
  • Konvertieren Sie das Video in Ogg für Firefox
  • Konvertieren Sie das Video in MP4 für Safari
  • Konvertieren Sie das Video in FLV für Internet Explorer
  • Fügen Sie das Videoelement Ihrer Webseite hinzu
  • Fügen Sie JavaScript und Flash Player hinzu, damit Internet Explorer funktioniert
  • Testen Sie in so vielen Browsern wie möglich
01 von 10

Hosten Ihres eigenen HTML 5-Videos im Vergleich zu YouTube

YouTube ist eine großartige Seite. Es macht es einfach, Video schnell in Webseiten einzubetten, und mit wenigen Ausnahmen ist die Ausführung dieser Videos ziemlich nahtlos. Wenn Sie ein Video auf YouTube veröffentlichen, können Sie ziemlich sicher sein, dass es von jedermann angesehen werden kann.

Die Verwendung von YouTube zum Einbetten Ihrer Videos hat jedoch einige Nachteile

Die meisten Probleme mit YouTube liegen auf der Verbraucherseite und nicht auf der Designerseite.

  • Langsames Suchen und Indizieren
  • Serverausfälle
  • Inhalte werden scheinbar willkürlich entfernt
  • Zu viel schlechter Inhalt

Es gibt jedoch einige Gründe, warum YouTube auch für Inhaltsentwickler schlecht ist. Dazu gehören:

  • Maximale Länge von 10 Minuten für Videos (für kostenlose Konten)
  • Schlechte Upload-Leistung
  • YouTube erhält unbegrenzte Nutzungsrechte an Ihrem Video
  • Jeder YouTube-Nutzer erhält unbegrenzte Nutzungsrechte an Ihrem Video

HTML5-Video bietet einige Vorteile gegenüber YouTube

Durch die Verwendung von HTML5 für Videos können Sie jeden Aspekt Ihres Videos steuern, von wem kann es angesehen werden, wie lange es ist, was der Inhalt enthält, wo es gehostet wird und wie der Server abschneidet. HTML5-Videos bieten Ihnen die Möglichkeit, Ihr Video in beliebig vielen Formaten zu codieren, um sicherzustellen, dass die maximale Anzahl der Personen angezeigt wird. Ihre Kunden benötigen kein Plugin oder müssen warten, bis YouTube eine neuere Version veröffentlicht.

Natürlich bietet HTML5-Video einige Nachteile

Diese schließen ein:

  • Sie müssen Ihr Video in mindestens drei verschiedenen Codecs codieren
  • Sie müssen JavaScript verwenden, um sicherzustellen, dass Browser, die HTML5 nicht unterstützen, funktionieren
  • Ihr Server muss die Bandbreitenanforderungen für das Hosting von Videos erfüllen können

Lesen Sie weiter unten

02 von 10

Schneller Überblick über den Video-Support im Web

Das Hinzufügen von Video zu Webseiten war lange Zeit ein schwieriger Prozess. Es gab so viele Dinge, die schief gehen könnten:

  • Zuerst verwenden Sie die Tag zum Einbetten Ihres Videos in Ihre Seite. ABER dieses Tag ist zugunsten eines anderen Tags veraltet. Und einige Browser haben es sowieso nie gut unterstützt.
  • Also wechselt man zum Tag, aber ältere Browser unterstützen es nicht und neuere Browser sind in ihrer Unterstützung skizzenhaft.
  • Dann denkst du Flash! Und kodiere dein Video als FLV-Datei. Flash wird jedoch auf vielen mobilen Geräten nicht unterstützt, und viele Menschen hassen Flash, unabhängig davon, wie er verwendet wird (25% der Befragten in meiner Umfrage, die nach Ihrer Meinung zu Flash fragen, gaben an, dass sie Flash in keiner Weise aushalten können).
  • Sie entscheiden sich also dafür, Ihr Video auf eine Video-Embedding-Site wie YouTube hochzuladen, aber dann haben Sie die Probleme mit YouTube, die wir besprochen haben.
  • Schließlich entscheiden Sie sich für HTML5, aber Internet Explorer unterstützt es nicht (nicht bis Internet Explorer 9). Und selbst wenn dies der Fall ist, werden zwei Video-Codec-Standards unterstützt, und nur ein Browser kann beide verwenden. Browser-Unterstützung für Videocodecs und Container

Also, was solltest du tun? Das Aufgeben von Videos ist für die meisten Websites keine Option mehr, da das Video immer wichtiger wird. Und viele Websites haben erfolgreich auf Video umgestellt.

Auf den folgenden Seiten dieses Artikels erfahren Sie, wie Sie Videos zu Ihren Webseiten hinzufügen, die in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 und 4, iPhone und Android, Flash und Internet Explorer 7 und 8 funktionieren Sie haben auch die Schlüssel, die Sie benötigen, um bei Bedarf Unterstützung für andere ältere Browser hinzuzufügen.

Lesen Sie weiter unten

03 von 10

Erstellen und bearbeiten Sie Ihr Video

Das erste, was Sie benötigen, wenn Sie ein Video auf einer Webseite platzieren möchten, ist das eigentliche Video. Sie können entweder kontinuierlich aufnehmen und anschließend bearbeiten, um ein Feature zu erstellen, oder Sie können ein Skript erstellen und es im Voraus planen. So oder so funktioniert es gut, es ist genau das, was Sie wollen. Wenn Sie nicht wissen, welche Art von Video Sie erstellen sollen, lesen Sie diese Vorschläge im Desktop-Video-Handbuch:

  • Familienvideoprojekte
  • Marketing- und Werbevideos
  • Virtuelle Videotouren
  • Wie zu Videos?
  • Hochzeitsvideos

Erfahren Sie, wie Sie qualitativ hochwertige Videos aufnehmen

Vergewissern Sie sich, dass Sie wissen, wie Sie im Innen- und Außenbereich aufnehmen und wie Audio aufgenommen wird. Die Beleuchtung ist auch sehr wichtig - zu helle Aufnahmen schaden den Augen und zu dunkel wirken einfach matschig und unprofessionell. Selbst wenn Sie nur ein 30-Sekunden-Video auf Ihrer Website haben möchten, wird die Qualität der Videos umso besser auf Ihrer Website angezeigt.

Denken Sie auch daran, dass das Urheberrecht für alle Sounds oder Musik (sowie für Filmmaterial) gilt, die Sie möglicherweise in Ihrem Video verwenden möchten. Wenn Sie keinen Zugriff auf einen Freund haben, der ein Lied für Sie schreiben und spielen kann, müssen Sie gebührenfreie Musik für den Hintergrund finden. Es gibt auch Orte, an denen Sie Videomaterial hinzufügen können.

Bearbeiten Ihres Videos

Es ist egal, welche Bearbeitungssoftware Sie verwenden, solange Sie mit der Bearbeitungssoftware vertraut sind und sie effektiv nutzen können. In Gretchen, dem Desktop Video Guide, finden Sie einige professionelle Tipps zur Videobearbeitung, mit deren Hilfe Sie Ihre Videos bearbeiten können, damit sie gut aussehen.

Speichern Sie Ihr Video in einem MOV oder AVI (oder MPG, CD, DV)

Für den Rest dieses Tutorials gehen wir davon aus, dass Sie Ihr Video in einem hochqualitativen (nicht komprimierten) Format wie AVI oder MOV gespeichert haben. Während Sie diese Dateien so verwenden können, wie sie sind, stoßen Sie auf alle Probleme mit Video, die wir bereits besprochen haben. Auf den folgenden Seiten wird erläutert, wie Sie Ihre Datei in drei Arten konvertieren, damit sie von der größten Anzahl von Browsern angezeigt werden kann.

04 von 10

Konvertieren Sie das Video in Ogg für Firefox

Das erste Format, in das wir konvertieren werden, ist Ogg (manchmal auch Ogg-Theora genannt). Dieses Format kann von Firefox 3.5, Opera 10.5 und Chrome 3 angezeigt werden.

Während Ogg über eine Browser-Unterstützung verfügt, bieten viele der bekannten Videoprogramme (Adobe Media Encoder, QuickTime usw.) leider keine Ogg-Konvertierungsoption. Die einzige Möglichkeit, ein Video in Ogg zu konvertieren, besteht darin, ein Konvertierungsprogramm im Web zu finden.

Konvertierungsoptionen

Es gibt ein Online-Tool namens Media-Convert, das verschiedene Videoformate (und Audioformate) in andere Videoformate (und Audioformate) konvertieren soll. Als wir es mit meinem 3-Sekunden-Testvideo ausprobierten, konnten wir es nicht auf meinem Mac schaffen. Aber du hast vielleicht mehr Glück. Diese Seite hat den Vorteil, kostenlos zu sein.

Einige andere Tools, die wir gefunden haben, sind:

  • Miro Video Converter (Windows Macintosh) - Dieses Programm bietet den Vorteil der Konvertierung in Ogg und MP4 (H.264) und ist Open Source.
  • Koyote Video Converter (Windows)
  • Free Video Converter Wir glauben, dass es sowohl eine Windows- als auch eine Macintosh-Version gibt, die auf der Website jedoch schwer zu erkennen ist
  • Simple Theora Encoder (Macintosh) - dies ist der, den wir normalerweise verwenden.

Wenn Sie Ihr Video im Ogg-Format gespeichert haben, speichern Sie es an einem Ort auf Ihrer Website und wechseln Sie zur nächsten Seite, um es in andere Formate für andere Browser zu konvertieren.

Lesen Sie weiter unten

05 von 10

Konvertieren Sie das Video in MP4 für Safari

Das nächste Format, in das Sie Ihr Video konvertieren sollten, ist MP4 (H.264-Video), damit es auf Safari 3 und 4 sowie auf dem iPhone und Android wiedergegeben werden kann. Außerdem können H.264-Videos problemlos in FLV-Dateien konvertiert werden, um sie auf Flash anzusehen.

Dieses Format ist in kommerziellen Produkten leichter verfügbar, und Sie haben wahrscheinlich bereits ein Programm, das in MP4 konvertiert wird, wenn Sie einen Video-Editor haben. Wenn Sie über Adobe Premiere verfügen, können Sie den Adobe Video Encoder oder QuickTime Pro verwenden. Viele der Konverter, die wir auf der vorherigen Seite besprochen haben, werden auch Videos in MP4 konvertieren.

  • MediaConvert - Ein Online-AWS-Tool.
  • Miro Video Converter (Windows Macintosh) - Dieses Programm bietet den Vorteil der Konvertierung in Ogg und MP4 (H.264) und ist Open Source.
  • SUPER (Windows) - konvertiert viele verschiedene Dateitypen in MP4 und FLV
  • Free Video Converter Wir glauben, dass es sowohl eine Windows- als auch eine Macintosh-Version gibt, die auf der Website jedoch schwer zu erkennen ist.

Speichern Sie Ihre MP4-Datei auf Ihrer Website. Anschließend müssen Sie sie in Flash konvertieren, damit der Internet Explorer verwendet werden kann.

06 von 10

Konvertieren Sie das Video in FLV für Internet Explorer

Videos lassen sich am einfachsten in FLV konvertieren, wenn Sie Flash selbst verwenden. So konvertieren wir meine Videos in Flash. Wenn Sie nicht über Flash verfügen, haben wir zwei beliebte Tools zum Konvertieren von Dateien in FLV:

  • SUPER (Windows) - konvertiert viele verschiedene Dateitypen in MP4 und FLV
  • ffmpegX (Macintosh) - konvertiert viele verschiedene Dateitypen in MP4 und FLV.

Speichern Sie Ihre FLV-Datei auf Ihrer Website. Auf der nächsten Seite erfahren Sie, wie Sie den HTML-Code schreiben, damit Sie Ihre Videos abspielen können.

Lesen Sie weiter unten

07 von 10

Fügen Sie das Videoelement Ihrer Webseite hinzu

Es ist sehr einfach, HTML 5 zu verwenden, um Videos zu Webseiten hinzuzufügen. Die meisten modernen Browser unterstützen HTML 5-Videos, obwohl sie nicht alle auf dieselbe Weise unterstützt werden. Dies bedeutet jedoch, dass Sie, wenn Sie Ihr Video als Ogg- und MP4-Format speichern, nur vier oder fünf Zeilen HTML schreiben können, um es in den meisten modernen Browsern (außer Internet Explorer 8) anzuzeigen. Hier ist wie:

Schreiben Sie die HTML 5-Doctype-Markierung, damit Browser HTML 5 erwarten können:

  1. Erstellen Sie Ihre Webseite wie gewohnt:

  2. Platzieren Sie im Körper
  3. Entscheiden Sie, welche Attribute Ihr Video haben soll: Wir empfehlen die Verwendung von Steuerelementen und das Vorladen. Verwenden Sie die Poster-Option, wenn Ihr Video keine gute erste Szene hat.
    1. Autoplay - Startet sofort nach dem Herunterladen
    2. Steuerelemente - Ermöglichen Sie es Ihren Lesern, das Video zu steuern (Pause, Rücklauf, Schnellvorlauf).
    3. Schleife - Starten Sie das Video am Anfang, wenn es endet
    4. Preload - Laden Sie das Video vorab herunter, damit es schneller verfügbar ist, wenn der Kunde darauf klickt
    5. poster - Definieren Sie das Bild, das Sie verwenden möchten, wenn das Video angehalten wird
  4. Fügen Sie dann die Quelldateien für die beiden Versionen Ihres Videos (MP4 und OGG) in das ein
  5. Öffnen Sie die Seite in Chrome 1, Firefox 3.5, Opera 10 und / oder Safari 4 und stellen Sie sicher, dass sie korrekt angezeigt wird. Sie sollten es mindestens in Firefox 3.5 und Safari 4 testen, da sie jeweils einen anderen Codec verwenden.

Das ist es. Sobald Sie diesen Code erstellt haben, haben Sie ein Video, das in Firefox 3.5, Safari 4, Opera 10 und Chrome 1 funktioniert. Aber was ist mit dem Internet Explorer?

Internet Explorer mag kein HTML 5 oder das

Im nächsten Abschnitt werden wir darüber sprechen, was Sie tun können, damit der IE 8 mit Ihren HTML 5-Video-Tags gut spielt und ein Video anzeigt. Sie müssen Flash verwenden.Die gute Nachricht ist, dass der IE 9 HTML 5 und das Video-Tag unterstützen soll.

08 von 10

Fügen Sie JavaScript und Flash Player hinzu, damit Internet Explorer funktioniert

Möglicherweise haben Sie bemerkt, dass sich im HTML der vorherigen Seite keine Quellzeile für die FLV-Datei befunden hat. Wenn Sie diese Seite in Internet Explorer getestet haben, funktioniert das nicht. Das liegt daran, dass Internet Explorer HTML 5 nicht erkennt und weder OGG- noch MP4-Videos nativ abspielen kann. Damit Internet Explorer 7 und 8 funktioniert, müssen Sie das Video als Flash abspielen. Aber es gibt mehr Schritte, als nur die FLV-Datei hinzuzufügen.

Schritt 1: Holen Sie sich einen Flash Video Player für Ihre Website

Wir empfehlen, FlowPlayer zu installieren, da es sich um einen Open Source Flash-Videoplayer handelt, den Sie auf Ihrem Webserver installieren können und immer dann verwenden können, wenn Sie Flash-Video zur Wiedergabe haben. Die kostenlose Version von FlowPlayer fügt Werbung in Ihre Videos ein. Sie können jedoch auch kommerzielle Lizenzen erwerben, wenn Sie diese benötigen.

Befolgen Sie die Anweisungen auf der FlowPlayer-Site, um FlowPlayer auf Ihrer Website zu installieren. Kurz gesagt, Sie installieren 2 SWF-Dateien und eine JavaScript-Datei auf Ihrer Site. Am unteren Rand Ihres HTML-Codes (vor dem Tag) Sie fügen eine Zeile hinzu:

Der Internet Explorer spielt das Video jedoch immer noch nicht ab. Sie müssen lernen, HTML 5-Tags zu erkennen.

Schritt 2: Überzeugen Sie den Internet Explorer, HTML 5-Tags zu lesen

In Google Code gibt es ein praktisches Skript namens "HTML Shiv", mit dessen Hilfe der IE HTML 5-Elemente erkennt. Also in der des HTML-Dokuments, auf das Sie verweisen möchten. Es ist am besten, es in IE-bedingten Kommentaren einzufügen, damit andere Browser nicht verwirrt werden:

Okay, jetzt erkennt IE das

Schritt 3: Fügen Sie eine Quellzeile für die FLV-Datei hinzu

Genau wie auf der vorherigen Seite fügen Sie Ihrem HTML 5 eine Zeile in der

Lesen Sie weiter unten

09 von 10

Fügen Sie JavaScript und Flash Player hinzu, um den Internet Explorer zum Laufen zu bringen - Teil 2

Leider sind wir immer noch nicht fertig. Wir müssen dem IE jetzt mitteilen, dass er den FlowPlayer Flash-Videoplayer verwenden soll, auf den wir oben hingewiesen haben.

Schritt 4: Drehen Sie die

Dafür brauchen wir ein anderes Skript. Wir haben das Skript von Dive Into HTML 5 erhalten. Als wir es jedoch getestet haben, hat es nicht funktioniert, bis wir ein paar Anpassungen vorgenommen haben:

  • Um die Zeile 31: Fügen Sie den Ort Ihrer FlowPlayer-Installation hinzu.
  • In Zeile 42: Ändern Sie den Dateityp von Video / mp4 in Video / x-flv
  • Um Zeile 94: Beginnen Sie mit if (!! $ && !! $ (document) .ready) {bis zum Ende des Dokuments, ändern Sie diesen Abschnitt wie folgt:

    if (!! $ && !! $ (document) .ready) {/ * jQuery-Benutzer können initialisieren, sobald das DOM bereit ist * / $ (document) .ready (html5_video_init);} else {/ * Alle anderen können bis zum Laden warten * // * addEvent-Funktion über http:ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = (obj, type, fn) {if (obj.addEventListener)obj.addEventListener (type, fn, false);else if (obj.attachEvent)obj.attachEvent ('on' + type, () {return fn.apply (obj, neues Array (window.event));});}addEvent (window, "load", html5_video_init);}

Nachdem Sie die JavaScript-Datei bearbeitet haben, laden Sie sie auf Ihren Server hoch und verknüpfen Sie sie unten auf Ihrer HTML-Seite (vor der ):

Wütend! Nachdem Sie all dies getan haben, sollten Sie Ihren HTML-Code hochladen, damit Sie mit dem Testen beginnen können.

10 von 10

Testen Sie in so vielen Browsern wie möglich

Das Testen von Videoseiten ist wichtig, wenn Sie einen erfolgreichen Start wünschen. Sie sollten Ihre Seite unbedingt mit den gängigsten Browsern und Versionen Ihrer Website testen.

Wir haben festgestellt, dass es zwar möglich ist, Tools wie BrowserLab und AnyBrowser zum Testen von Video zu verwenden, aber es ist nicht so zuverlässig wie das Aufrufen der Seite in einem Browser. Wenn Sie das tun, können Sie wirklich sehen, ob es funktioniert oder nicht.

Da Sie sich die Mühe gemacht haben, Ihr Video in drei Formaten zu kodieren, sollten Sie es testen, um sicherzustellen, dass es in allen drei Formaten angezeigt wird. Das bedeutet, Sie sollten es mindestens testen in:

  • Firefox 3.5
  • Safari 3 oder 4
  • Internet Explorer 7 oder 8

Sie können in Chrome testen. Da Chrome jedoch alle drei Methoden anzeigt (auch Flash, wenn Sie das Plugin haben), ist es schwer zu erkennen, ob ein Problem mit einer der anderen beiden vorliegt oder welcher Codec Chrome verwendet.

Sie sollten auch in älteren Browsern testen, um zu sehen, was sie tun, insbesondere wenn viele Ihrer Leser ältere Browser verwenden.

Das Video in älteren Browsern zum Laufen bringen

Wie bei jeder Webseite sollten Sie zuerst überlegen, wie wichtig es ist, diese Browser zum Laufen zu bringen. Wenn 90% Ihrer Kunden Netscape verwenden, sollten Sie einen Fallback-Plan für sie haben. Aber wenn weniger als 1% der Fall ist, ist dies möglicherweise nicht so wichtig.

Sobald Sie entschieden haben, welche Browser Sie unterstützen möchten, erstellen Sie am einfachsten eine alternative Seite, in der das Video angezeigt werden kann. Auf dieser alternativen Seite würden Sie ein Video mit HTML 4 einbetten Verwenden Sie entweder eine Form der Browsererkennung, um sie dort umzuleiten, oder fügen Sie einfach einen Link zu dieser Seite auf dieser hinzu.