Verwenden von HTML5 zum Anzeigen von Videos in aktuellen Browsern

Hosten Ihres eigenen HTML 5-Videos vs. Verwendung von YouTube

YouTube ist eine großartige Seite. Es erleichtert das Einbetten von Videos in Webseiten schnell und mit einigen kleinen 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 jeder sehen kann.

Aber die Verwendung von YouTube zum Einbetten Ihrer Videos hat einige Nachteile

Die meisten Probleme mit Youtube sind eher auf der Verbraucherseite als auf der Designerseite, Dinge wie:

• Langsame Suche und Indizierung
• Serverausfälle
• Inhalte werden (scheinbar) willkürlich entfernt
• Zu viel schlechter Inhalt

Aber es gibt einige Gründe, warum YouTube auch für Inhaltsentwickler schlecht ist, darunter:

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

HTML5-Video bietet einige Vorteile gegenüber YouTube

Verwenden von HTML5 für Video können Sie jeden Aspekt Ihres Videos steuern, von wem es angezeigt werden kann, wie lange es ist, was der Inhalt enthält, wo es gehostet wird und wie der Server funktioniert. Und HTML5 gibt Ihnen die Möglichkeit, Ihr Video in so vielen Formaten zu codieren, wie Sie benötigen, um sicherzustellen, dass die maximale Anzahl von Personen es sehen kann. Ihre Kunden brauchen kein Plugin oder 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 einschließen, um sicherzustellen, dass Browser, die dies nicht unterstützen HTML5 wird funktionieren.
• Ihr Server muss in der Lage sein, die Bandbreitenanforderungen für das Hosten von Videos zu bewältigen.

Schneller Überblick über den Videosupport im Web

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

• Zuerst verwenden Sie die Tag, um Ihr Video in Ihre Seite einzubetten. ABER dieses Tag ist zugunsten eines anderen Tags veraltet. Und einige Browser haben es sowieso nie gut unterstützt.
• Also wechselst du zum Tag, aber ältere Browser unterstützen es nicht und neuere Browser sind in seiner Unterstützung lückenhaft.
• Dann denkst du Blitz! Und kodieren Sie Ihr Video als FLV-Datei. Aber Blitz wird auf Windows-Geräten nicht mehr unterstützt.
• Sie entscheiden sich also, Ihr Video auf eine Website zum Einbetten von Videos 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 (bis Internet Explorer 9). Und selbst wenn Sie dies tun, werden zwei Videocodec-Standards unterstützt und nur ein Browser kann beide verwenden.

Was sollst du also 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 ein funktionierendes Video zu Ihren Webseiten hinzufügen in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 und 4, iPhone und Android und Internet Explorer 7 und 8. Sie haben auch die Schlüssel, die Sie benötigen, um bei Bedarf Unterstützung für andere ältere Browser hinzuzufügen.

Erstelle und bearbeite dein Video

Das erste, was Sie brauchen, wenn Sie ein Video auf eine Webseite stellen 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 es skripten und im Voraus planen. So oder so funktioniert gut, es ist einfach alles, womit Sie sich wohl fühlen. Wenn Sie nicht wissen, welche Art von Video Sie erstellen sollen, sehen Sie sich diese Ideen aus dem Desktop Video Guide an:

• Familienvideoprojekte
• Marketing- und Werbevideos
• Virtuelle Videotouren
• Videos
• Hochzeitsvideos

Erfahren Sie, wie Sie hochwertige Videos aufnehmen

Stellen Sie sicher, dass Sie wissen, wie man drinnen und draußen aufnimmt und wie man Audio aufnimmt. Auch die Beleuchtung ist sehr wichtig – zu helle Aufnahmen verletzen die Augen, und zu dunkle sehen nur trüb und unprofessionell aus. Selbst wenn Sie nur ein 30-Sekunden-Video auf Ihrer Website haben möchten, wird es umso besser auf Ihrer Website wiedergegeben, je höher die Qualität ist.

Denken Sie auch daran, dass das Urheberrecht für alle Sounds oder Musik (sowie Archivmaterial) gilt, die Sie in Ihrem Video verwenden möchten. Wenn du keinen Zugang zu einem Freund hast, der ein Lied für dich schreiben und spielen kann, musst du nach Lizenzfreie Musik im Hintergrund zu spielen. Es gibt auch Orte, an denen Sie Filmmaterial zu Ihren Videos hinzufügen können.

Bearbeiten Ihres Videos

Es spielt keine Rolle, welche Bearbeitungssoftware Sie verwenden, solange Sie damit vertraut sind und sie effektiv einsetzen können. Gretchen, der Desktop Video Guide, enthält einige professionelle Videobearbeitungstipps, die Ihnen helfen können, Ihre Videos so zu bearbeiten, dass sie großartig aussehen.

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

Für den Rest dieses Tutorials gehen wir davon aus, dass Sie Ihr Video in einem hochwertigen (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 dem Video, die wir bereits besprochen haben. Auf den folgenden Seiten wird erläutert, wie Sie Ihre Datei in drei Typen konvertieren, damit sie von den meisten Browsern angezeigt werden kann.

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 ist eines, das Firefox 3.5, Opera 10.5 und Chrome 3 anzeigen können.

Obwohl Ogg Browser-Unterstützung bietet, bieten viele der bekannten Videoprogramme, die Sie kaufen können (Adobe Media Encoder, QuickTime usw.), leider keine Ogg-Konvertierungsoption. Die einzige Möglichkeit, Ihr Video in Ogg zu konvertieren, besteht darin, ein Konvertierungsprogramm im Web zu finden.

Konvertierungsoptionen

Es gibt ein Online-Tool namens Media-Convert, das behauptet, verschiedene Video- (und Audio-)Formate in andere Video- (und Audio-)Formate zu konvertieren. Als wir es mit meinem 3-Sekunden-Testvideo versuchten, konnten wir es auf meinem Mac nicht zum Laufen bringen. Aber vielleicht hast du mehr Glück. Diese Seite hat den Vorteil, dass sie kostenlos ist.

Einige andere Tools, die wir gefunden haben, sind:

• Miro Videokonverter (Windows Macintosh): Dieses Programm hat den Vorteil, dass es sowohl in Ogg als auch in MP4 (H.264) konvertiert und ist Open Source.
• Kostenloser Videokonverter: Wir denken, dass es sowohl eine Windows- als auch eine Macintosh-Version gibt, aber es war schwer von ihrer Site zu sagen
• Einfacher Theora-Encoder (Macintosh): Dies ist der, den wir normalerweise verwenden.

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

Konvertieren Sie das Video in MP4 für Safari und Internet Explorer

Das nächste Format, in das Sie Ihr Video konvertieren sollten, ist MP4 (H.264-Video), damit es mit Internet Explorer 9 und höher, Safari 3 und 4 sowie dem iPhone und Android abgespielt werden kann.

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

• Medienkonvertieren: Ein Online-AWS-Tool.
• Miro Videokonverter (Windows Macintosh): Dieses Programm hat den Vorteil, dass es sowohl in Ogg als auch in MP4 (H.264) konvertiert und ist Open Source.
• SUPER (Windows): Konvertiert viele verschiedene Dateitypen in MP4
• Kostenloser Videokonverter: Wir denken, dass es sowohl eine Windows- als auch eine Macintosh-Version gibt, aber es war schwer auf ihrer Site zu erkennen.

Fügen Sie das Videoelement zu Ihrer Webseite hinzu

1. Erstellen Sie Ihre Webseite so, wie Sie sie normalerweise erstellen würden:

2. Platzieren Sie im Körper die body
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.
   Autoplay - um zu starten, sobald es heruntergeladen wurde
4. Steuerelemente - erlauben Sie Ihren Lesern, das Video zu steuern (Pause, Zurückspulen, Vorspulen)
5. loop - starte das Video von vorne, wenn es endet
6. preload - Laden Sie das Video vorab herunter, damit es schneller fertig ist, wenn der Kunde darauf klickt
7. Poster - Definieren Sie das Bild, das Sie verwenden möchten, wenn das Video angehalten wird
8. Fügen Sie dann die Quelldateien für die beiden Versionen Ihres Videos (MP4 und OGG) in das
9. Öffnen Sie die Seite in Chrome 1, Firefox 3.5, Opera 10 und/oder Safari 4 und stellen Sie sicher, dass sie richtig 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 installiert 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?

Es ist sehr einfach, HTML 5 zu verwenden, um ein Video zu Webseiten hinzuzufügen. Die meisten modernen Browser unterstützen HTML 5-Video, obwohl sie es nicht alle auf die gleiche Weise unterstützen. Dies bedeutet jedoch, dass Sie, wenn Sie Ihr Video sowohl im Ogg- als auch im 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 wissen, dass sie HTML 5 erwarten:

1. Erstellen Sie Ihre Webseite so, wie Sie sie normalerweise erstellen würden:

2. Platzieren Sie im Körper die body
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.
   Autoplay - um zu starten, sobald es heruntergeladen wurde
4. Steuerelemente - erlauben Sie Ihren Lesern, das Video zu steuern (Pause, Zurückspulen, Vorspulen)
5. loop - starte das Video von vorne, wenn es endet
6. preload - Laden Sie das Video vorab herunter, damit es schneller fertig ist, wenn der Kunde darauf klickt
7. Poster - Definieren Sie das Bild, das Sie verwenden möchten, wenn das Video angehalten wird
8. Fügen Sie dann die Quelldateien für die beiden Versionen Ihres Videos (MP4 und OGG) in das
9. Öffnen Sie die Seite in Chrome 1, Firefox 3.5, Opera 10 und/oder Safari 4 und stellen Sie sicher, dass sie richtig 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 installiert haben, haben Sie ein Video, das in Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ und Chrome 1 funktioniert.

Testen Sie in so vielen Browsern wie möglich

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

Das Testen von Videoseiten ist entscheidend, wenn Sie einen erfolgreichen Start haben möchten. Sie sollten Ihre Seite unbedingt in den gängigsten Browsern und Versionen für Ihre Website testen.

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

Da Sie sich alle Mühe gegeben haben, Ihr Video in mehreren Formaten zu codieren, sollten Sie es testen, um sicherzustellen, dass es in mehreren Browsern angezeigt wird. Dies bedeutet, dass Sie es mindestens in Firefox, Safari und IE testen sollten.

Zu Ihrer Sicherheit sollten Sie 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 zunächst ü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% dies tun, ist es möglicherweise nicht so wichtig.

Sobald Sie sich entschieden haben, welche Browser Sie unterstützen möchten, erstellen Sie am einfachsten eine alternative Seite, auf der sie das Video anzeigen können. Auf dieser alternativen Seite würden Sie ein Video mit HTML 4 einbetten. Und dann verwenden Sie entweder eine Form der Browsererkennung, um sie dorthin umzuleiten, oder fügen Sie einfach einen Link zu dieser Seite auf dieser Seite hinzu.