Share
Wenn Sie schon immer Video-Streaming in Ihre Entwürfe integrieren wollten, sich aber nicht mit unordentlichen Codelösungen (oder Flash) beschäftigen wollten, haben wir zwei schnelle und einfache Lösungen für Sie. Heute werfen wir einen Blick darauf, was jede Lösung Webdesignern bietet und wie Sie beide in Ihren eigenen Projekten einsetzen können.
Oberflächlich betrachtet ist das Streaming von Videos durch eine Webseite nicht das, was viele Webdesigner im Kopf haben. Dies ist verständlich, da nur diese beiden Wörter ("Web" und "Video") eine Wissensbasis implizieren, die sich am besten an anderer Stelle im Envato-Universum findet?
? Was wäre, wenn ich Ihnen sagen würde, dass das Hinzufügen von Streaming-Videos zu Ihren Seiten jetzt einfacher ist als das Hinzufügen eines JPGs. Nun, da ich deine Aufmerksamkeit habe? Lass uns in das Gute eintauchen:
Bevor ich Sie Schritt für Schritt durch den Prozess leite, werfen wir zunächst einen Blick auf die Geschichte des "Streaming Web-Videos" aus der Sicht von Webdesignern:
Nehmen wir an, Sie arbeiten an einem Projekt und handhaben die grundlegende Front-End-Codierung. In der Vergangenheit war das Hinzufügen von Streaming-Videos zu unseren Entwürfen ein ziemlich komplizierter Prozess - Sie müssen Adobe Flash kennen (und eine Lizenz haben). Vorausgesetzt, Sie haben Flash und wissen, wie Sie sich damit auskennen, dann müssen Sie das Video im richtigen Format herunterladen, in Flash importieren, den archaischen Prozess des Einrichtens des Videos durchlaufen und dann exportieren. Schließlich müssen Sie es richtig in Ihre Website einbetten. Erfahrene Flash-Veteranen können dies zwar schnell erledigen, aber für die meisten Design-Designer ist das Kopfschmerzen.
Eine andere mögliche Lösung wäre, einen Dienst wie YouTube oder Vimeo zu verwenden. Dies ist für die meisten Menschen in Ordnung, aber was ist mit denen von uns, die einfach Videos im Web anzeigen möchten ohne das Branding oder andere Extras, die Websites wie YouTube und Vimeo hinzufügen? Bis vor kurzem gab es dafür keine einfache Lösung.
Dank des Versprechens des HTML 5 Video smokescreen habe ich kürzlich einige der neuen "Streaming-Video-Lösungen" ausprobiert. Das war natürlich genau dann, als Google webM in seine liebevolle Umarmung brachte und die Dinge viel komplizierter wurden, als ich erwartet hatte. Ich habe im Wesentlichen kapituliert und bin mit der Einstellung "Lass es Gott klären". Offensichtlich wurde die Debatte über das Streaming von Webvideos noch nicht gelöst.
Vor ein paar Jahren schrieb ich einen Artikel, The Rise of Flash Video, der unheimlich einer ähnlichen Debatte folgt, die begann, als das Video tatsächlich ins Netz kam und der Flash-Videostandard zum Tragen kam. Der entscheidende Punkt war erneut: "Es muss einen einfacheren Weg geben, dies zu tun." Erraten Sie, was? Jetzt gibt es da.
Adobe ist seit einigen Jahren am Open Source Media Framework beteiligt. Ich habe OSMF immer als eine verwirrende Reihe von Technologien und Techniken empfunden, die, ehrlich gesagt, meine Zähne schmerzen lassen. Die Technologien sind wirklich cool, sehr innovativ und machen Spaß damit - aber sie richten sich an Entwickler. und wenn es eine Möglichkeit gibt, eine einfache Lösung übermäßig zu komplizieren, werden die Hardcore-Codierer der Welt sie finden. OSMF ist nicht anders. Wenn Sie durch die Website wandern, gibt es für einfache Designer keine einfachen Plug-and-Play-Lösungen.
Erst wenn Sie ein paar Schritte zurücktreten, wird das Ziel des OSMF-Projekts klar: "Video-Wiedergabe in hoher Qualität". Das bedeutet wirklich reibungsloses Laden von Videos, wirklich glatte Player und nichts von Vimeo und YouTube. Wo das Ganze wirklich interessant wird, ist, dass wir jetzt Spaß am Spiel haben und nichts Neues lernen müssen.
In diesem Tutorial zeige ich Ihnen zwei Möglichkeiten, dies zu erreichen. Das erste ist "Drop Dead Simple" und das zweite erhöht den Level auf "Dead Simple". Um in das Spiel einzusteigen, müssen Sie lediglich ein Video (eines dieser Tutorials für jede Lösung) in ein Verzeichnis auf einer Website hochladen. Lass uns anfangen:
Dieser Teil ist ziemlich einfach - laden Sie einfach ein Video mit einem FTP-Programm oder ähnlichem auf Ihren Webserver hoch. Für diese Demo verwenden wir die Datei "Stockhorn.f4v". Alles, was Sie brauchen, um hierher zu kommen, ist die URL zu Ihrem Video. Keep ist irgendwo, wo Sie für den nächsten Schritt kopieren / einfügen können.
Im Wesentlichen bietet diese Seite einen OSMF-Player für die Massen. Wenn Sie eine mp4-, flv- oder f4v-Datei in Ihre Webseite integrieren möchten, ohne ein wenig Flash, ActionScript oder Flex zu kennen, ist dies der richtige Ort für Sie. Klicken Sie unten auf der Seite auf die Schaltfläche Flash Media-Wiedergabe konfigurieren. Dadurch wird die Seite Flash Media Playback Setup geöffnet.
Sie müssen den absoluten Pfad zum Video und die Dateierweiterung des Videos eingeben. Die drei von Flash verwendeten Formate sind flv, f4v und H.264.Wenn Sie sich nicht sicher sind, wie diese erstellt werden, können Sie meine Flash Video Basics-Serie unter active.tutsplus überprüfen. Sie müssen auch die Breiten- und Höhenwerte des Videos eingeben. Die Werte für das beiliegende Video sind 720 x 405. Wenn Sie dies getan haben, klicken Sie im Bereich Preview Player auf die Schaltfläche Preview, und Ihr Video sollte beginnen.
Wenn Sie Dreamweaver verwenden, öffnen Sie die Seite und wählen Sie die Option Tags und fügen Sie den Code einfach vom Player in die Codeansicht ein. Wenn Sie die Seite testen, wird Ihr Video im Browser abgespielt. An diesem Punkt müssen Sie lediglich die HTML-Seite in die Bibliothek hochladen, die das Video auf Ihrer Website enthält.
Das sind die Schritte, und wenn Sie hierher gehen, wird das Video abgespielt. Das einzige, was ich anders gemacht habe, war ein Poster-Rahmen. Mehr dazu im nächsten Abschnitt.
Wie ich oben sagte, werde ich hier nicht "alle Technikfreaks" sein, aber es gibt einen anderen Weg, der etwas komplizierter ist als der, den ich gerade gezeigt habe Strobe-Medienwiedergabe.
Beim Strobe Media Playback wird derselbe Ansatz wie bei Flash Media verwendet, aber es gibt eine Menge mehr Leistung unter der Haube. Sie können beispielsweise mehrere Bitraten verwenden, um Verbindungen zu erkennen und die richtige vid basierend auf der Verbindungsgeschwindigkeit des Benutzers einzugeben. Sie können die Steuerelemente anpassen, sie zum Abspielen von Audio verwenden, JPGs anzeigen und fast alle Medien, die in einer Flash-SWF-Datei angezeigt werden. In diesem Beispiel werden wir den gleichen "No Code" -Ansatz wie in der vorherigen Lösung verwenden, aber ich werde eine "Drehung" hinzufügen. Wenn Sie mit mir zusammenarbeiten möchten, befinden sich alle Dateien, die Sie benötigen, im Strobe-Ordner im Download dieses Tutorials.
Wie zuvor - laden Sie einfach ein Video mit einem FTP-Programm oder einem ähnlichen Programm auf Ihren Webserver hoch. Für diesen Teil der Demo verwenden wir die Datei "GeorgeSquare.mp4". Alles, was Sie brauchen, um hierher zu kommen, ist die URL zu Ihrem Video. Keep ist irgendwo, wo Sie für den nächsten Schritt kopieren / einfügen können.
Die gewünschte Version ist Strobe Media Playback 1.5.1. Betaversionen werden mit Strobe als "Sprints" bezeichnet, und der aktuelle Sprint unterstützt beispielsweise die neue Stage Video-Funktion des Flash Players. Wenn Sie die Datei entpacken, haben Sie mehrere Möglichkeiten: Legen Sie den Ordner im Stammverzeichnis des Webservers Ihres Computers ab oder laden Sie ihn in das Stammverzeichnis Ihrer Website hoch. Ich habe ein Verzeichnis mit dem Namen "smp" erstellt und alle Dateien auf meinen Webserver hochgeladen.
Ein Poster-Frame ist eine großartige Gelegenheit, um mit einem Video ein Branding zu machen. Wenn der erste Frame des Videos einfach nur dort sitzt und einem Bild ähnelt, warum setzen Sie dieses Bild nicht ein. In diesem Fall habe ich einfach ein neues Fireworks CS5-Dokument geöffnet, das den Abmessungen des Videos entspricht (1280 x 720), die Assets zusammengefügt und als abgeflachtes JPG-Bild im selben Ordner wie das Video gespeichert.
Dieser Ordner befindet sich im Strobe-Download. Wenn Sie es öffnen, wird es Ihnen bekannt vorkommen. Der Hauptunterschied zwischen diesem Dokument und dem, auf das Sie bei Flash Media Playback gestoßen sind, ist, dass die Auswahlmöglichkeiten weitaus umfangreicher sind und der Player Ihnen gehört? nicht auf der Adobe-Website. Wenn die Seite geöffnet wird, werden Sie feststellen, dass es viele Auswahlmöglichkeiten gibt. Die wichtigsten für die Zwecke dieses Tutorials sind:
Parameter einbetten:
Flash-Vars:
Wenn Sie eine umfassendere Erklärung dieser Seite und der Flash-Vars benötigen, hat mein Kollege Joseph Labreque einen ausführlichen technischen Überblick über Strobe Media Playback bei active.tutsplus veröffentlicht.
Ihr Posterrahmen sollte im Player erscheinen. Wenn Sie nicht möchten, dass der große Play-Button über dem Poster-Frame angezeigt wird, setzen Sie die playButtonOverlay -Eigenschaft im Flash vars-Bereich auf False.
Wenn die Datei geöffnet wird, spielen Sie den Film ab. Die wirklich nette Sache ist, dass alle Steuerelemente aktiv sind - wenn Sie also eine HD-MP4-Datei verwenden, wird Ihr Video so groß, dass es den Bildschirm mit wenig oder gar keiner Pixelisierung ausfüllt.
Endlich! Willkommen in der Welt des Streamings von Flash-Videos, ohne dass Sie etwas über Flash wissen müssen. Klicken Sie hier, um dieses Projekt auf meiner Website anzuzeigen.
Wie ich zu Beginn dieses Stücks gesagt habe, glaube ich wirklich nicht, dass Flash Video in Kürze verschwinden wird. Mit dem Aufkommen einer Multi-Screen-Umgebung ist es jetzt möglich, dasselbe Video zum Beispiel auf einem Droid, iPhone, Samsung Galaxy Tablet und Ihrem HD-Fernsehgerät abzuspielen. Dies macht Webdesigner offensichtlich ein bisschen nervös, weil? Gut? weil das Einbetten von Streaming-Videos in der Vergangenheit eher technisch war. Das ist wirklich nicht mehr der Fall! Wie ich in diesem Artikel betont habe, hat Adobe einige Lösungen für Sie, wenn Sie Text kopieren und in eine Webseite einfügen können.
Wenn Sie dies als interessant empfinden und wirklich in OSMF oder Strobe eintauchen möchten, sollten Sie wirklich mit der Serie von Joeseph Labreque beginnen, die mit active begann. tutsplus, da er auf die technischen Aspekte rund um die Streaming-Video-Debatte eingehender eingeht.
Accentsconagua