Im ersten seiner Blogs für PC Pro , Web-Entwickler Ian Devlin zeigt, wie Sie mit HTML5 Videos in Ihre Website einbetten
So ändern Sie Eigenschaften Sims 4
Das wahrscheinlich größte und am meisten diskutierte Feature von HTML5 ist eingebettetes Video. Derzeit können Sie Ihrer Website Videoinhalte nur mit einem Drittanbieter-Plugin wie Flash, QuickTime oder RealPlayer hinzufügen. Mit dem Aufkommen von HTML5 und dem Videoelement wird sich dies alles ändern, da die Videounterstützung über den Webbrowser erfolgt, sodass keine Unterstützung von Drittanbietern erforderlich ist.
Mehrere Webbrowser bieten bereits Unterstützung für HTML5. Hier zeigen wir Ihnen, wie Sie Plugin-freies Video in Ihre Website einbetten können und welche Probleme Sie dabei haben.
Dateitypen und Browserkompatibilität
Zunächst werfen wir einen kurzen Blick auf die verschiedenen Videodateitypen, die in HTML5 unterstützt werden. Dies sind Theora OGG und H.264 (.mp4). Verschiedene Browser unterstützen verschiedene Typen, und einige unterstützen überhaupt keine. Die folgende Tabelle weist darauf hin:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Oper 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Codecs und andere technische Probleme
HTML5 selbst gibt keinen zu verwendenden Video-Codec an , und dies hat zu Argumenten geführt, welcher ist das Beste für das Web . Um alle Browser abzudecken, müssen wir also beide Codecs unterstützen.
Und dann gibt es natürlich den Internet Explorer. Im Moment unterstützt keine der veröffentlichten Versionen von Internet Explorer das Videoelement und zum Abspielen von Videos ist weiterhin ein Plugin erforderlich. Dies wird sich mit der Veröffentlichung von Internet Explorer 9 (voraussichtlich Anfang nächsten Jahres) ändern, wenn H.264 zusammen mit vielen anderen HTML5-Goodies unterstützt wird.
Falls Sie sich fragen, wie Sie Ihre Videodateien in OGG umwandeln können (Sie können mehr über den Theora OGG-Typ lesen auf der TheoraKochbuch ) Dateien mit dem Miro Videokonverter .
Weitere ausführliche Informationen zum Videoelement und den Codecs finden Sie im Tauchen Sie ein in html5: Video im Web von Mark Pilgrim.
HTML5-Code
Jetzt kommen wir zum eigentlichen HTML5-Code und wie wir das Ding zum Laufen bringen können. HTML5 bietet uns zwei neue Elemente, mit denen wir unseren Webseiten Videos hinzufügen können: das |_+_| -Element, das wir bereits erwähnt haben, und das |_+_| Element. Schauen wir uns diese der Reihe nach an.
Das Element
Das Videoelement kann die folgenden Attribute haben:
| Attribut | Beschreibung |
|---|---|
| src | eine gültige URL zur Videodatei selbst |
| automatisches Abspielen | ein boolescher Wert, der angibt, ob das Video automatisch abgespielt werden soll |
| Kontrollen | ein boolescher Wert, der angibt, dass die Standardmediensteuerelemente vom Browser angezeigt werden sollen |
| Schleife | ein boolescher Wert, der angibt, ob das Video wiederholt abgespielt werden soll |
| Vorspannung | zeigt dem Browser an, ob ein präventives Herunterladen des Videos selbst erforderlich ist oder ob nur Metadaten benötigt werden. Mögliche Werte sind:
|
| Poster | die URL zu einer Bilddatei, die angezeigt werden soll, wenn keine Videodaten verfügbar sind |
| Breite | die Breite des Videos in CSS-Pixeln |
| Höhe | die Höhe des Videos in CSS-Pixeln |
Daran erkennen Sie, wie einfach es ist, ein OGG-Video allein mit dem Video-Element in Ihre Website einzubetten:
Das ist wirklich alles.
Jeder Browser, der das Theora OGG-Format unterstützt, sollte Ihr Video jetzt ohne weiteres anzeigen und abspielen. Natürlich ist es nicht so einfach, denn wie wir aus der obigen Tabelle gesehen haben, würde der Code nur in Firefox, Chrome und Opera funktionieren. Wir brauchen also auch einen Fallback auf H.264. Dies kann mit dem |_+_| . erreicht werden -Element, mit dem wir mehrere Medienquellen für das Videoelement definieren können.
So formatieren Sie ein USB-Laufwerk Windows 10
Das Element
Das Quellelement hat die folgenden Attribute:
| Attribut | Beschreibung |
|---|---|
| src | eine gültige URL zur Mediendatei (in diesem Fall Video) selbst |
| Art | der Typ der Mediendatei, die a . sein muss Mime Typ , z.B. |_+_| zeigt an, dass es sich um ein Theora OGG-Video handelt, und Sie können auch den MIME-Codec bereitstellen, um dem Browser zu helfen, zu entscheiden, wie das Video abgespielt werden soll, indem Sie |_+_| verwenden. |
| Hälfte | gibt den beabsichtigten Medientyp der Medienressource an und muss gültig sein Medienabfrage , z.B. |_+_| zeigt an, dass das Video für Handheld-Geräte geeignet ist oder |_+_| Dies zeigt an, dass das Video für Bildschirme mit 720 Pixel oder mehr geeignet ist. |
Hinweis: Das Quellelement ist void und hat ein Start-Tag, aber kein schließendes Tag
Das Nützlichste am Element source ist, dass wir es verwenden können, um die verschiedenen Dateitypen zu stapeln, sodass der Browser jeden nacheinander ausprobieren kann, bis er einen findet, den er abspielen kann.
Verwenden und zusammen
Um Videos in den verschiedenen Typen innerhalb des Video-Elements zu stapeln, geben wir den Code wie folgt ein:
Der obige Code funktioniert jetzt in allen Browsern außer Internet Explorer, der die oben angegebene Meldung anzeigt.
Sie können dies selbst testen, indem Sie sich die HTML5-Testvideoseite ansehen, die ein Beispielvideo eines Schmetterlings im Theora OGG- und MP4-Format enthält Android-Mobilteil, Sie sollten es anzeigen können.
Die scharfen Messer unter euch werden jetzt feststellen, dass wir dieses Stacking nutzen können und unten einen Fallback auf Flash (oder ein anderes Plugin) haben, anstatt eine Entschuldigung anzuzeigen, dass Sie diese Videonachricht nicht sehen können, indem Sie den folgenden Code verwenden :
Fazit
Wie bei den meisten HTML5-Elementen ist die Browserunterstützung für die Quell- und Videoelemente derzeit lückenhaft. Es gibt derzeit auch eine große Debatte darüber, ob das Quellelement die Verwendung von Flash als beliebteste Methode zum Hinzufügen von Videoinhalten zu Websites beenden wird. Ich bin mir nicht sicher, ob es Flash vollständig töten wird, aber dennoch denke ich, dass es hier bleiben wird und Webentwicklern einen saubereren und einfacheren Ansatz zum Einbetten von Videos bieten wird.
