Responsive Webdesign lernen (2) — Können Videos responsiv gemacht werden?

Rezension der vorherigen Folge:

Gestern haben wir darüber gesprochen, wie Seiten auf unterschiedliche Gerätegrößen reagieren können. Die wichtigsten verwendeten Methoden sind der @media-Befehl und der Größenprozentsatz .

Ergänzung zur vorherigen Folge:

Verwenden Sie unter anderem die folgenden CSS-Einstellungen, damit die Bild- oder Videogröße die Breite des Gerätebildschirms nicht überschreitet:

Diese Technik wird im „Head First Mobile Web“ „ Fluid Image Technique “ genannt.

Können Videos responsiv gemacht werden?

Neben Bildern ist Video eine weitere häufige Form von Multimedia. Manchmal werden beim Webdesign bei Bedarf Videos zur Seite hinzugefügt. Im Allgemeinen werden die Videos auf YouTube, Tudou/Youku, Sina und andere Websites hochgeladen und dann in Form von Links zu unseren Webseiten hinzugefügt.

Warum kann ich auf meinem iPhone keine YouTube-Videos ansehen? (Übersee)

Beim Betrachten von Webvideos unter iOS können Sie keine Videos im Flash-Format ansehen, ohne einen Jailbreak durchzuführen und Plug-Ins zu installieren, da der Browser auf dem iPhone Adobe Flash nicht unterstützt. Dies hängt mit den kommerziellen Wettbewerbsrichtlinien von Apple und anderen Unternehmen zusammen, und wir können nichts dagegen tun. Für dieses Problem gibt es beim Webdesign mit YouTube-Videoquellen eine Lösung, die darin besteht, den ursprünglichen Codeausschnitt im Object Embed-Format, der in die Webseite eingebettet ist, durch einen neuen Codeausschnitt zu ersetzen.

Der verschachtelte Codeausschnitt der alten Seite lautet beispielsweise:

Kann ich <iframe> zum Quellen von inländischen Videos verwenden?

Wir können sehen, dass die Methode zum Einbetten von Objekten verwendet wird, indem ein Abschnitt des eingebetteten Videocodes von Tudou bzw. Sina abgefangen wird:

Kartoffel:

Umschließen Sie nun die Tudou-Videoadresse mit dem Codeblock <iframe> und fügen Sie ihn in die Testseite ein. Daraufhin tritt ein Problem auf:

( Dies ist ein Bild... )

Der Vollbildmodus ist nicht möglich ... Dies liegt daran, dass die Wiedergabeadresse separat erfasst wird und Flash-bezogene Einstellungen wie „ allowFullScreen“ verworfen werden. Dann gibt es offensichtlich zwei Probleme bei der Verwendung der Iframe-Methode:

Erstens hat sich das Quellformat des Films nicht geändert und liegt noch immer im SWF-Format vor. Er kann daher noch immer nicht von Mobiltelefonen abgespielt werden, die Adobe Flash nicht unterstützen.

Der zweite Grund ist, dass die Parametereinstellungen des Flashplayers verloren gehen , was den Verlust einiger Funktionen zur Folge hat.

Dies ist offensichtlich inakzeptabel.

Für den ersten Punkt können wir nur hoffen, dass Video-Websites universellere Videoformate verwenden, um die Nebenwirkungen des kommerziellen Wettbewerbs zwischen Hardwareherstellern zu vermeiden. Für den zweiten Punkt werden wir weiterhin die Methode zum Einbetten von Objekten verwenden, da diejenigen, die das Flash-Format auf ihren Mobiltelefonen nicht sehen können, verschiedene Cracks und Plug-Ins gefunden haben, um dies auszugleichen. Daher sollten Webdesigner in Ermangelung eines universelleren Filmquellformats weiterhin die vorherige Methode verwenden.

Allerdings ist die Größe von Videoformaten im Allgemeinen festgelegt und es ist schwierig, sie nur mit CSS und ohne Einsatz von JavaScript dynamisch entsprechend der Größe des Geräts oder der aktuellen Größe des Browsers zu ändern. Die Breite des Videos kann als Prozentsatz festgelegt werden. Wenn sie beispielsweise auf 80 % des Containers festgelegt ist, nimmt das Video immer 80 % der Breite seines Containers ein. Die Höhe kann jedoch nicht festgelegt werden, da die meisten Benutzer das Browserfenster nicht proportional skalieren. Entweder schränken Sie es ein oder kürzen Sie es. Daher ist es nicht realistisch, sich bei der Skalierung der Videogröße auf Prozentwerte zu verlassen.

Unter dieser Prämisse hoffen wir weiterhin, dass das Video eine bestimmte Größe beibehält, während der Rest der Webseite sein Layout dynamisch entsprechend der Größe des Browsers ändert.

Wie im Video gezeigt:

Es ist ersichtlich, dass sich die Größe des Videos während des gesamten Vorgangs des Ziehens im Browser nicht ändert. Die Breite des Videos nimmt erst ab, wenn die Breite des Browsers kleiner als die Breite des Videos ist (unter Verwendung der oben erwähnten Fluid Image-Technik ).

Um den gesamten Effekt zu erzielen, ist keine neue Technik erforderlich. Es besteht lediglich darin, die CSS-Größenbeurteilung von zwei auf drei zu erhöhen. Einzelheiten entnehmen Sie bitte dem Demonstrationscode.

[Laden Sie hier den Democode herunter]

Zusammenfassen:

Es scheint unmöglich zu sein, die Videogröße allein durch CSS adaptiv zu gestalten. Ich hoffe, dass sich Mobilgeräte normal mit Seitenvideos anschauen können und erwarte außerdem, dass Video-Websites anstelle von Flash universellere Videoformate verwenden …

Zum Schluss noch eine Formel aus dem Buch : RWD = Fluid-Grid-Layouts + CSS-Medienabfragen + Fluid Image/Media + ein Geisteszustand

Die allgemeine Idee ist, dass Responsive Design = fließendes Rasterlayout + @media-Anweisung + fließende Bilder/Medien + Bewusstsein des Designers