Share
In diesem Tutorial für Anfänger bis Fortgeschrittene werde ich Ihnen zeigen, wie Sie HD-Videos abspielen können, ohne die unvermeidlichen Unschärfen, die beim Vergrößern des Videos auftreten.
Der Grund dafür ist, dass ich es leid bin, YouTube oder andere Websites zu besuchen, auf denen HD-Video mit einer Vollbildoption angezeigt wird. Wenn ich auf die Schaltfläche Vollbild klicke, muss ich feststellen, dass ich plötzlich das Rezept für meine Brille geändert habe.
Das Problem ist nicht das Video, sondern die Art und Weise, wie der Flash Player den Vollbildmodus ausführt. Lass uns herausfinden, wie es geht richtig…
Wenn Sie ein Video im Flash Player abspielen, wird das Video in jeder Hinsicht auf die Bühne gelegt. Klicken Sie auf die Vollbildschaltfläche und die Bühne wird größer. Wenn die Bühne größer wird, bringt sie das Video mit. Vergrößern Sie ein 720 x 480-Video auf 1280 x 720, und ist es kein Wunder, dass das Video unscharf wird?
Adobe hatte mit diesem Problem zu kämpfen, als es die Möglichkeit vorstellte, Full-HD-Videos über den Flash Player abzuspielen. Ihre in Flash Player 9.0.115.0 eingeführte Lösung war äußerst elegant. Anstatt die Bühne zu vergrößern, "schweben" Sie das Vid nicht in einem Rechteck "über" der Bühne und lassen den Designer oder Entwickler entscheiden, ob Sie die Bühne oder nur ein Stück davon vergrößern möchten. Dies wird durch eine weitere clevere Technik von Adobe erreicht: Hardwarebeschleunigung und Skalierung.
Die Hardwarebeschleunigung wird über den Flash Player angewendet. Wenn Sie mit der rechten Maustaste (PC) oder bei gedrückter Ctrl-Taste (Mac) auf eine SWF-Datei klicken, die auf einer Webseite abgespielt wird, öffnen Sie das Flash Player-Kontextmenü. Wählen die Einstellungen Daraufhin wird das in Bild 1 dargestellte Einstellungsfenster angezeigt Hardwarebeschleunigung aktivieren Sie können HD-Videos im Vollbildmodus anzeigen. Wenn Sie die Option deaktiviert lassen, wird beim Klicken auf eine Vollbildschaltfläche der Player mithilfe der Scaling-API verwendet, wenn eine FLV-Datei in den Vollbildmodus verschoben wird. Das Tolle daran ist, dass Sie die Hardwarebeschleunigung ausgewählt haben. Sie wird nur bei Bedarf verwendet. Wenn Sie also auf die Schaltfläche Vollbild klicken, wird nur das Rechteck und dessen Inhalt - in diesem Fall ein Video - auf Vollbild skaliert, und die Hardwarebeschleunigung übernimmt die Wiedergabe des Videos.
Nachdem Sie die Anleitung erhalten haben, wie Sie dieses Tutorial gelesen haben, führen Sie die folgenden Schritte aus, um ein HD-Videoerlebnis im Vollbildmodus zu erstellen:
Zum Download gehört eine .mp4-Datei Vultures.mp4. Es ist ein Clip aus einer TV-Serie, die von meinem College, dem Humber Institute of Technology und Advanced Learning produziert wurde. Wir verwenden diese Datei für das Projekt, obwohl auch mov, f4v und physisch große FLV-Dateien verwendet werden können.
Möglicherweise haben Sie in den letzten Jahren viel von "Buzz" in Bezug auf HD-Video und das .mp4-Format gehört und sich gefragt, worum es beim Chatter geht. Hier ist ein kurzer "Elevator Pitch":
Der Schlüssel für das .mp4-Format ist der im August 2007 in Flash Player eingeführte Videostandard AVC / H.264. Der .mp4-Standard, genauer gesagt, ist als MPEG-4 bekannt, einem internationalen Standard, der von Motion Pictures entwickelt wurde Die Expertengruppe (MPEG) und das Format verfügen auch über eine ISO-Anerkennung.
Was diese Dateien für Flash-Designer und Entwickler so attraktiv macht, ist, dass MPEG-4-Dateien nicht geräteabhängig sind. Sie können auf einem HD-Fernseher, iPod oder einer Playstation genauso einfach abgespielt werden wie in einem Browser. Dank der in den Flash Player integrierten Hardware-Beschleunigungs- und Multithreading-Unterstützung können Sie Videos mit jeder Auflösung und Bittiefe bis hin zu der vollen HD-Auflösung von 1080p auf HD-Fernsehern abspielen.
Der eine Aspekt des MPEG-4-Standards, den ich ziemlich interessant finde, ist, dass es, wie das XFL-Format, das gerade in der CS4-Suite zum Einsatz kommt, ein "Container" -Format ist. Damit sind .mp4-Dateien gemeint, die verschiedene Datentypen auf mehreren Spuren in der Datei speichern können. Dabei werden die Daten synchronisiert und verschachtelt. Dies bedeutet, dass eine .mp4-Datei auch Metadaten, Grafiken, Untertitel usw. enthalten kann, auf die Flash möglicherweise zugreifen kann. Das sind die guten Nachrichten. Die schlechte Nachricht ist, auch wenn der MPEG-4-Container mehrere Audio- und Videospuren enthalten kann. Der Flash Player spielt derzeit nur eine davon und ignoriert den Rest. Die andere schlechte Nachricht ist, dass dieses Format keine Transparenz bedeutet. Wenn Sie einen Alphakanal hinzufügen möchten, kehren Sie zum FLV-Format zurück.
Schließlich benötigen H.264 .mp4-Dateien eine hohe Verarbeitungsleistung. Adobe hat uns ganz klar gesagt, dass dieser Inhalt am besten auf Dual-Core-PCs und Macs angezeigt werden kann. Die Umstellung auf diese Prozessoren ist bereits seit einigen Jahren im Gange, es wird jedoch noch einige Jahre dauern, bis alle Computer die Prozessoranforderungen erfüllen können, die dieses Format erfordert.
Ich habe die Oberfläche dieses Formats kaum überarbeitet. Wenn Sie in dieses Format eintauchen möchten, lesen Sie H.264 For The Rest Of Us von Kush Amerasinghe bei Adobe. Es ist eine großartige Grundierung für alle, die diese Technologie noch nicht kennen.
Öffne das BigItUp.fla Datei im Download. Wenn Sie zum ersten Mal mit einer H264-Datei arbeiten oder im Vollbildmodus arbeiten, werden die Abmessungen der Flash-Stufe (1050 x 500) möglicherweise recht groß sein. Wir benötigen den Platz auf der Bühne, um das Video mit einer physischen Größe von 854 x 480 aufzunehmen und Platz für den Button in der oberen linken Ecke der Bühne zu lassen.
Fügen Sie der Aktionsebene den folgenden ActionScript-Code hinzu:
import flash.geom. *; import flash.display.Stage; var mySound: SoundTransform; var myVideo: Video; var nc: NetConnection = neue NetConnection (); nc.connect (null); var ns: NetStream = neuer NetStream (nc); ns.client = das; btnBig.buttonMode = true;
Wir beginnen mit dem Einfügen des Geometriepakets und der Stage-Klasse, um das "Schwebeflug" -Video auf Vollbild zu bringen. Die nächsten beiden Variablen - mySound und myVideo - werden verwendet, um den Lautstärkepegel des Audios einzustellen und ein Videoobjekt zu erstellen.
Mit diesem Housekeeping aus dem Weg bauten wir die NetConnection und NetStream Objekte, mit denen das Video abgespielt werden kann. In der letzten Zeile wird der Movieclip angezeigt, mit dem das Video im Vollbildmodus angezeigt wird buttonMode.
Fügen Sie den folgenden ActionScript-Code hinzu:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); Funktion netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("Die Dateistruktur des MP4 ist ungültig."); else if (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("Das MP4 enthält keine unterstützten Spuren"); Funktion onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; Mit der ersten Funktion können wir einige Fehler überprüfen. Nicht alle mp4-Dateien werden gleich erstellt. Wenn das Video nicht abgespielt wird, wäre es schön zu wissen, was das Problem sein könnte. In diesem Fall werden wir uns einige Fehlermeldungen der NetStream-Klasse anhören, die für mp4-Dateien von Bedeutung sind. Die erste ist eine Überprüfung, um sicherzustellen, dass die Datei nicht beschädigt ist oder ein Format aufweist, das nicht unterstützt wird. Nur weil eine Datei im Quicktime-Player abgespielt wird, bedeutet dies nicht, dass sie in Flash abgespielt wird.
Die nächste stellt sicher, dass die Audio- und Videospuren unterstützt werden. Wenn beispielsweise die H.264-Kodierung nicht für die Videospur verwendet wird oder die AAC-Kodierung nicht für die Audiospur angewendet wird, treten Probleme auf.
Die nächste Funktion geht in die Metadaten der Videodatei ein, um die Breiten- und Höhenwerte für das Videoobjekt zu ermitteln.
Geben Sie den folgenden ActionScript-Code ein:
function goFullScreen (evt: Object): void var scalingRect: Rechteck = neues Rechteck (myVideo.x, myVideo.y, myVideo.width, myVideo.height); stage ["fullScreenSourceRect"] = scalingRect; if (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Hier passiert die "Magie". Mit dieser Funktion wird das Rechteck erstellt, in dem das Video gespeichert wird. Seine Größe wird an die Abmessungen des Videoobjekts angepasst, die aus der zweiten Funktion im vorherigen Codeblock entnommen wurden. Die nächste Zeile setzt die fullScreenSourceRect Eigenschaft der Bühne auf die Abmessungen des soeben erstellten Rechtecks.
Die Bedingungsanweisung, die den Rest des Codeblocks ausmacht, prüft den aktuellen Status der Stufengröße vom normalen bis zum vollen Bildschirm oder umgekehrt. So läuft das Video im Vollbildmodus. Das Video-Objekt wird in diese Quelle eingefügt, nicht in die Bühne. Dies bedeutet, dass es sich erweitern oder zusammenziehen kann, ohne dass die Bühne dies tut und das Video "fuzzing".
In der letzten Zeile wird die Schaltfläche auf der Bühne verwendet, um den gesamten Bildschirm anzuzeigen.
Geben Sie den folgenden ActionScript-Code ein:
myVideo = neues Video (); myVideo.x = 185; myVideo.y = 5; addChild (meinVideo); myVideo.attachNetStream (ns); ns.play ("Vultures.mp4"); mySound = ns.soundTransform; mySound.volume = .8; ns.soundTransform = mySound; Der erste Codeblock teilt Flash mit, dass die Variable "myVideo" der Name eines Videoobjekts ist, das 185 Pixel vom linken Rand der riesigen Bühne entfernt ist und 5 Pixel von der Oberseite entfernt ist. Das addChild () Diese Methode stellt das Videoobjekt auf die Bühne und die verbleibenden zwei Zeilen verbinden das Videoobjekt mit der NetStream und starten Sie das Video.
Der abschließende Codeblock untersucht die Audiospur des Videos, die über das System in das Projekt eingespeist wird NetStream und senkt die Lautstärke auf 80%.
Speichern Sie die Datei im selben Ordner wie das Video.
Normalerweise würde ich in dieser Phase des Tutorials auch sagen, dass Sie den SWF testen sollen. Sie können, aber die Schaltfläche funktioniert nicht. Das Beste, was Sie erwarten können, ist, das Video im swf abzuspielen. Die Vollbildfunktion wird vom HTML-Wrapper Ihrer SWF-Datei gesteuert, nicht von Flash. Lasst uns damit umgehen.
Wählen Sie Datei> Veröffentlichungseinstellungen. Wenn das Dialogfeld Einstellungen für Veröffentlichungen geöffnet wird, wählen Sie die Optionen SWF und HTML aus.
Klicken Sie auf die Registerkarte Flash. Wählen Sie im Player-Popup Flash Player 9 oder Flash Player 10 aus. Denken Sie daran, dass HD-Videos nur in Flash Player 9 oder höher abgespielt werden können.
Klicken Sie auf die Registerkarte HTML. Wählen Sie im Popup-Menü "Vorlage" die Option "Flash Only - Allow Full Screen".
Klicken Sie auf die Schaltfläche Veröffentlichen, um die SWF- und die HTML-Datei zu erstellen.
Speichern Sie die Datei, beenden Sie Flash und öffnen Sie die HTML-Seite in einem Browser. Klicken Sie auf "Groß es!" Taste.
Was ist damit? Echte Flash-Designer und Entwickler verwenden keine "Steenking" -Komponenten.
Im Dezember 2007 veröffentlichte Adobe das Update 3 für den Flash Player 9 in aller Stille. Ich verwende das Wort "leise", da es mit den üblichen Bugfixes und Optimierungen gemischt wurde und eine aktualisierte Version der FLVPlayback-Komponente ausrutschte, die es HD ermöglichte Video. Hier ist wie:
Öffnen Sie ein neues Flash ActionScript 3.0-Dokument und speichern Sie es im selben Ordner wie das Vultures-Video.
Wählen Fenster> Komponenten Ziehen Sie in den Videokomponenten eine Kopie der FLVPlayback Komponente auf die Bühne.
Öffnen Sie den Komponenteninspektor. Sie müssen hier zwei Dinge tun. Wähle aus SkinUnderAllNoCaption.swf Navigieren Sie im Skin-Bereich im Quellbereich zum Geier.mp4 Datei und fügen Sie sie dem Dialogfeld Inhaltspfad hinzu. Aktivieren Sie das Kontrollkästchen Quelldimensionen anpassen und klicken Sie auf OK. Flash wird in das Video aufgenommen und erfasst die Metadaten. Wenn dies abgeschlossen ist, wird das Dialogfeld geschlossen und die Komponente vergrößert sich auf die Abmessungen des Videos. Schließen Sie den Komponenteninspektor.
Wählen Sie Ändern> Dokument und klicken Sie auf die Schaltfläche Inhalt Klicken Sie auf die Schaltfläche, um die Bühne an die Größe der Komponente anzupassen. Wenn die Bühne auf die Größe der Komponente eingestellt ist, wird sie nur an die Größe des Videos angepasst. Die Haut bleibt am unteren Rand der Bühne hängen, was bedeutet, dass sie auf einer Webseite nicht sichtbar ist. Ändern Sie den Höhenwert in 525 Pixel, um die Haut aufzunehmen. Klicken Sie auf OK, um die Änderung zu akzeptieren.
Nachdem Sie nun die Abmessungen der Bühne geändert haben, hängt die Komponente natürlich von der Bühne ab. Wählen Sie die Komponente aus und setzen Sie im Eigenschaftenbereich die X- und Y-Koordinaten auf 0.
Wählen Sie Datei> Veröffentlichungseinstellungen und wählen Sie die SWF- und HTML-Dateitypen.
Klicken Sie auf die Registerkarte Flash und wählen Sie Flash Player 9 aus.
Klicken Sie auf die Registerkarte "HTML" und wählen Sie "Flash Only - All Full Allow" im Popup "Vorlagen" aus.
Klicken Sie auf die Schaltfläche Veröffentlichen. Wenn die SWF- und die HTML-Datei veröffentlicht sind, klicken Sie auf OK. Speichern Sie die Datei und beenden Sie Flash.
Öffnen Sie die HTML-Datei in einem Browser. Klicken Sie auf die Schaltfläche Vollbild, um den Vollbildmodus zu starten.
In diesem Tutorial habe ich Ihnen zwei Möglichkeiten gezeigt, wie Sie mit Flash problemlos in den Vollbildmodus wechseln können. Bei der ersten Methode wurde ActionScript verwendet, um dies zu ermöglichen. Mit dem Schlüssel wurde ein Rechteck erstellt, das über der Bühne "schwebte" und das Video enthielt.
Das zweite Beispiel zeigte Ihnen, wie Sie die FLVPlayback-Komponente für den Vollbildmodus verwenden.
Wie Sie herausgefunden haben, war der Schlüssel für beide Projekte nicht der ActionScript-Code, sondern der HTML-Wrapper, der die Vollbildwiedergabe ermöglichte.
Diese Tutorials funktionieren immer lokal, aber ich bin mir sicher, dass Sie sich fragen, ob sie tatsächlich online arbeiten würden. Ich habe beides gepostet, um zu beweisen, dass "Ja, es kann gemacht werden."
Den Code-Ansatz im ersten Beispiel finden Sie hier. Das Video wurde freundlicherweise von Adobe und Red Bull zur Verfügung gestellt und ist eine vollständige 1080p-Produktion.
Die Geier erscheinen in einem Beispiel, in dem die Komponente hier verwendet wird.
