Hallo, in diesem Vortrag werden wir über Multimedia sprechen.
Dies beinhaltet Video und Audio in Ihre Website.
Jetzt sind Video und Audio zwei der beliebtesten und
zwei am meisten gehassten Elemente des Internets.
Designer lieben es, weil sie ihre coolen Videos und
vielleicht einige hausgemachte Musik online stellen und mit allen teilen.
Benutzer, die auf Ihre Website zugreifen, hassen sie manchmal, weil sie das Gefühl haben, sie hätten
keine Kontrolle über das, was sie sehen.
Also, worüber wir heute sprechen werden, sind die HTML5-Audio- und Video-Elemente.
Wir werden kurz den Zweck von Plugins erklären.
Und dann werden wir schließlich über die Probleme der Barrierefreiheit nachdenken
, die mit der Verwendung dieser Arten von Multimedia-Tags einhergehen.
Also vor HTML5 gab es keine wirklich konsistente Verwendung von Multimedia
, die in allen Browsern gehalten wurden.
Das neue HTML5 ist so konzipiert, dass man die Verwendung von Plugins oder
zusätzliche Software vermeiden muss, die Sie noch nicht auf Ihrem Rechner haben.
Es sollte wirklich Plug and Play sein.
Wenn Sie in ein Video setzen wollen, sollten die Leute in der Lage sein, es zu sehen
, ohne Quicktime oder Flash oder irgendetwas in dieser Linie herunterladen zu müssen.
Jetzt ist es noch kein vollständig implementiertes Tag.
Aber es bewegt sich sehr schnell in diese Richtung.
Beginnen wir also mit dem Video-Element.
Das Video-Tag verwendet also ein Quellattribut, das
dem Bildattribut sehr ähnlich ist.
Sie teilen dem Browser mit, wo sich die Datei befindet.
Sie können auch verwenden, was wir eingebettete Tags nennen,
wo Sie möglicherweise das Video-Tag und dann mehrere Quellen unten haben.
Es gibt eine Reihe von Attributen, die sehr weit verbreitet sind.
Die ersten beiden, Höhe und Breite, sind ziemlich selbsterklärend.
Wie groß möchten Sie, dass Ihr Video im Browser angezeigt wird?
Autoplay gibt an, ob das Video gestartet werden soll, sobald Sie die Seite laden.
Loop ermöglicht das Video immer wieder abzuspielen.
Und das letzte, Steuerelemente, ist etwas, das Sie hinzufügen können, um der Person mehr
Kontrolle darüber zu geben, wann sie anhalten und das Video starten soll.
Wenn Sie ein Video-Tag verwenden, ist es in der Regel eine wirklich gute Idee,
Text zusammen mit den verschiedenen Attributen zu setzen.
Auf diese Weise, wenn der Browser aus irgendeinem Grund das Tag nicht unterstützt oder
das Video nicht abspielen kann, erhalten Sie eine Art hilfreicher Hinweis für den Benutzer, der ihm mitteilt,
dass es hier ein Video geben sollte, das Sie betrachten würden.
Das Audio-Element ist dem Video sehr ähnlich, und
dann verwenden wir wieder ein Quellattribut, um mit der Datei zu verknüpfen.
In der Regel verwenden Sie eine MP3- oder WAV-Datei.
Die Attribute wieder, sehr ähnlich.
Sie haben Autoplay, Steuerelemente und Schleife, aber wir haben auch gepuffert, stummgeschaltet und Lautstärke.
Und das sind die zusätzlichen Attribute, die Sie einfügen können, wo Sie steuern,
was die Person hört und wie laut.
Auch wenn Sie Audio verwenden, können Sie Clips festlegen, wo Sie hineingehen können und
sagen, ich möchte, dass das Video zu diesem bestimmten Zeitpunkt gestartet wird.
Also mein erstes Beispiel, ich möchte, dass es nur die Musik von 5 bis 25 Sekunden abspielt.
Der nächste, du beginnst am Anfang und
du wirst nur die ersten 39 Sekunden spielen.
Wieder können Sie weiter und weiter.
Ich möchte mit einer Minute 38 Sekunden beginnen, und einfach voran und spielen bis 45.
Oder am Ende kannst du einfach sagen, hey, beginne bei der 42 Sekunde und spiele von dort.
So, Ihnen den Code für HTML-Video und
Audio zu zeigen, ist ziemlich das Gegenteil dessen, worum es geht.
Es soll darum gehen, Dinge anzuschauen und Dinge zu hören.
Also lassen Sie uns voran gehen und schauen uns jetzt einen Code an, der tatsächlich funktioniert.
Sie können sehen, dass ich den src als nur meinen BoxCar-Film habe, und
ich habe die Standardbreite auf 40 gesetzt.
Also werde ich hier rüber zu Sublime gehen und das im Browser öffnen.
Da ist es, und es ist nicht sehr aufregend.
Es sei denn, Sie haben super schnelle Augen und Ihr Browser ist unglaublich schnell, Sie völlig
verpasst die Tatsache, dass es dieses Video geladen und gespielt den ganzen Weg durch.
Also lasst uns weitermachen und es noch einmal versuchen.
Eigentlich hat es es einfach geladen und nichts getan.
Lassen Sie uns Autoplay hinzufügen.
Alles klar, speichern Sie es.
Ich werde hier rüber gehen und neu laden, und jetzt können Sie sehen,
indem Sie das Autoplay-Attribut hinzufügen, es wird automatisch das Video anzeigen.
Nun, das ist etwas, das Sie nicht tun wollen, es sei denn, Sie sind sehr sicher
, dass der Betrachter es sehen will.
Es gab einen großen Aufruhr vor kurzem, als eine Social-Media-Website
begann, alle Videos Autoplay zu machen.
Also, wenn du weitermachst, wurden all diese Videos plötzlich abgespielt.
Und es verzehrte eine riesige Menge an Bandbreite für Leute, okay?
Also, anstatt einfach nur Autoplay zu machen, lassen Sie uns voran und setzen Sie Kontrollen ein.
Auf diese Weise
können Sie sehen, dass wir nun ein kleines Bedienfeld am unteren Rand des Videos hinzugefügt haben.
Benutzer können das Video jetzt starten, das Video stoppen und zurückspulen.
Dies ist wirklich die Art, wie Sie irgendwie darüber nachdenken möchten,
wie Sie die Erfahrung für den Benutzer verbessern können.
Es ist möglich, mehrere Attribute
in dies zu setzen und sie irgendwie übereinander zu setzen.
Wenn wir das jetzt machen, erleben Sie meine
Fünfjährige mehrfach und immer wieder die Straße hinunter fliegen.
Wieder möchten Sie wirklich vermeiden, Schleife zu verwenden und auch die Verwendung von Auto-Play zu vermeiden,
es sei denn, Sie geben den Leuten die Möglichkeit, auch die Steuerelemente zu verwenden, in
Ordnung?
Eine letzte Sache, über die ich hier sprechen möchte, ist, dass Sie mit Steuerelementen und
Schleife bemerken, das sind Attribute, die keine Werte annehmen.
So src =, width =.
Wenn Sie diese booleschen Attribute einfügen,
ist es dasselbe, wie Steuerelemente gleich wahr zu sagen.
Schleife ist gleich wahr.
So haben wir mit unserem Video durchgemacht.
Lassen Sie uns voran und schauen Sie uns das Audio für eine Sekunde an.
Mach das hier ein bisschen größer.
Was ich hier habe, ist, dass ich nur zwei Mal einen Link zu demselben Song habe.
In meiner ersten Version kann man sehen, dass ich die kleine Audioleiste gegeben habe,
weil ich dafür gesorgt habe, Steuerelemente zu verwenden.
Und wenn ich spielen würde, wird es weitergehen und den ganzen Song durchspielen.
In meiner zweiten Option können Sie jedoch sehen, dass ich hier die t= 15:35 hinzugefügt habe.
Ich habe es für dich eingerichtet, damit
du den Song wirklich hören wirst, wenn der aufregende Teil wirklich eintritt.
Dies sind also nur einige einfache Beispiele dafür, wie Sie die Tags verwenden würden, um Ihr
Video-Audio zu zeigen.
Und ich hoffe wirklich, dass Sie beim Programmieren sicherstellen, dass Sie Dinge eingeben und sich mit Dingen
verwirren und mit Dingen spielen, um wirklich ein Gefühl davon zu bekommen, wie diese Videos und
all die verschiedenen HTML5-Tags funktionieren.
Also eines der Dinge, über die ich mit Leuten spreche, die in
anderen Versionen von HTML codiert wurden und nicht wirklich den Wechsel zu HTML5 vornehmen wollen.
Dass es so viele Gründe gibt, dass Sie diesen schnellen einfachen Schalter machen möchten.
Und Plugins sind ein ausgezeichnetes Beispiel.
Da es vor HTML5 keinen Standard gab, waren Plugsins erforderlich.
Also, was wir tun wollen, ist
voran zu gehen und selbst wenn es im Moment nicht unterstützt wird, gehen Sie voran und verwenden Sie dieses Tag, zu
verstehen, dass einige Browser meine immer noch Flash benötigen, um sie zu spielen.
Lassen Sie uns schließlich über Probleme mit der Barrierefreiheit sprechen.
Wenn Sie Video oder Audio verwenden, genau wie bei jeder Art von nicht-kontextabhängigen
Inhalten, möchten Sie sicherstellen, dass Sie jede Art von Textbeschreibungen und
Untertitel oder andere gleichwertige Inhalte bereitstellen.
Sie möchten sicherstellen, dass Sie auch Links zu Plugins zur Verfügung stellen.
Ansonsten sind Sie so ziemlich einfach mit einer Art
leeres kleines kaputtes Symbol links, das die Leute nicht immer verstehen.
Und schließlich ist das Wichtigste, was ich möchte, dass Sie von diesem Vortrag wegnehmen,
außer dass Sie den Code verwenden können,
dass Multimedia Ihre Inhalte wirklich verbessern sollte.
Du willst nicht, dass es eine Ablenkung ist.
Sie möchten nicht, dass Leute Zeit damit verbringen, herauszufinden, wie
sie es ausschalten können, um wirklich zum Inhalt Ihrer Seite zu gelangen.
Danke.