Übersicht über die Handhabung von flexiblen Medien

Wenn Sie den Weg des responsiven Webdesigns einschlagen, gehören flüssige Raster dazu. Das heißt, Container-Elemente mit prozentualen Breiten. Nur ein Beispiel: Ein <article>, das einen Blogbeitrag enthält, könnte auf einem kleinen Bildschirm 320 Pixel breit und auf einem großen Bildschirm 690 Pixel breit sein. Text kann in der Größe geändert werden und fließt gut, um einen Container zu füllen. Das ist nicht allzu schwer. Aber Medien – Bilder, Videoplayer und Audioplayer – erfordern etwas mehr Aufmerksamkeit (z. B. ein Video, das vom Bildschirmrand absteht == schlecht). Dieser Beitrag soll die Methoden zur Handhabung dieser Medien zusammenfassen.

Flexible Bilder

Wenn Sie mit Unterstützung für IE 7 und höher zufrieden sind. Dieses kleine Schmuckstück wird Ihnen gute Dienste leisten

img {
  max-width: 100%;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

Wenn Sie sich um die Unterstützung für IE 7 kümmern (ich hoffe nicht, aber ich verstehe, dass es Szenarien gibt, in denen Sie müssen), verwenden Sie dies, um sicherzustellen, dass die Bilder die Skalierung überstehen

img { 
  -ms-interpolation-mode: bicubic; 
}

Hier erfahren Sie mehr dazu.

Wenn Sie sich um IE 6 kümmern müssen (schon wieder…) enthält dieser Artikel von Ethan Marcotte eine JavaScript-Lösung. Eine Art Kummer, zusätzliches JavaScript für einen bereits viel langsameren Browser zu laden, aber so ist das Leben.

Ein Umdenken

Es gab eine Zeit, in der das Ändern der Größe von Bildern ein ziemliches Tabu war. Browser waren schlecht darin, Bilder zu skalieren, und Bandbreite wurde verschwendet. Diese Haltung ist heute fast verschwunden, hauptsächlich weil Browser Bilder jetzt ziemlich gut skalieren und gut aussehen lassen. Tatsächlich ist es mit "Retina"-Displays eine gute Sache, zu große Bilder für den Container zu liefern, da sie beim Herunterskalieren schärfer aussehen.

Die Bandbreite ist jedoch immer noch ein (großes) Problem. Deshalb ist das Thema responsive Bilder gerade so heiß. Der Punkt ist: Wenn Sie an flexible Bilder denken, denken Sie auch über responsive Bilder nach. Mehr dazu finden Sie hier in den aktuellen Lösungen.

Flexibles Video

Flexibles Video ist etwas komplexer als Bilder. Wenn Sie HTML5 <video> *direkt* verwenden, ist die gute Nachricht, dass es sein Seitenverhältnis beibehält, genau wie Bilder, sodass die gleiche Technik funktioniert.

video {
  max-width: 100%;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

Ich bin jedoch der Meinung, dass es eine ziemlich schlechte Idee ist, HTML5 <video> direkt zu verwenden. Die benötigten Formate haben sich jahrelang verschoben und sind noch nicht am Ende. Hinzu kommt, dass 1) das Hosten von Videos bandbreitenintensiv und teuer ist, 2) Streaming ein weiteres kompliziertes Thema ist, 3) die Aufrechterhaltung der richtigen Qualität über Formate, Geräte und verfügbare Bandbreite hinweg schwierig ist und 4) das Skinning konsistenter Steuerelemente für den Player schwierig ist und... nun ja... verwenden Sie HTML5-Video direkt nicht.

Stattdessen empfehle ich dringend die Verwendung eines Videodienstes wie YouTube oder Vimeo. Wenn Sie Videos von diesen Diensten einbetten, betten Sie ein <iframe> ein. Was sich im iframe befindet, kann HTML5-Video sein, aber Sie müssen sich nicht direkt damit befassen.

All das bedeutet: <iframe>s haben ein Problem mit dem Seitenverhältnis.

Thierry Koblentz hat dieses Problem vor Jahren in seinem A List Apart-Artikel Creating Intrinsic Ratios for Video gelöst.

Die Grundidee ist, dass Sie einen Video-Wrapper-Div mit null Höhe und einem Top-Padding in Prozent erstellen. Dieser Prozentsatz ist tatsächlich ein Prozentsatz der Breite, wodurch das Seitenverhältnis beibehalten wird. Dann positionieren Sie das Video absolut darin, was Ihnen die schwer fassbare Fähigkeit gibt, das Seitenverhältnis beizubehalten. Wir würden den iframe für die absolute Positionierung ansprechen, da Videos dies nicht brauchen, aber iframes schon. Die Grundlagen

.video-wrapper {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

Schauen Sie sich den Artikel dazu für weitere Nuancen und Details zur Unterstützung älterer Browser an. Ich behandle auch all dies und füge einige selbstgemachte JavaScript-Lösungen (mit Demos) in meinem .net-Magazin-Artikel Create Fluid Width Videos hinzu.

Genug Komplexität, hereinspaziert Simplicity

Wenn Sie jQuery verwenden und genug von der Komplexität rund um das Thema flexibles Video haben, lade ich Sie ein, FitVids.js auszuprobieren. Ich habe dieses kleine jQuery-Plugin zusammen mit Dave Rupert entwickelt, um genau dieses Problem zu lösen. Es verwendet die gleichen Konzepte wie oben erklärt, nur dass es dies automatisch tut. Das bedeutet 1) keine nicht-semantische Hülle in Ihrem verfassten Markup, 2) Seitenverhältnisse, die zum einzelnen Video passen (nicht alle Videos sind gleich).

FitVids.js funktioniert sofort mit allen gängigen Videoplayern und ist sehr einfach zu erweitern, um mit jedem Player zu funktionieren.

Sublime Video verwenden?

Ich habe ein Tutorial, wie man deren Player flüssig macht.

MediaElements.js verwenden?

MediaElements.js ist ein sehr schöner HTML5-Videoplayer, der einige der oben genannten Probleme mit HTML5-Video löst. Insbesondere bietet er ein schönes konsistentes Player-Skin und die Möglichkeit, auf ältere Technologien wie Flash und Silverlight zurückzugreifen, um Videos abzuspielen. Es ist kein Allheilmittel, da es Sie nicht vor den Plattformkriegen auf Mobilgeräten (die im Allgemeinen kein Flash oder Silverlight haben) rettet oder bei Streaming- oder Qualitätsproblemen hilft, aber es ist trotzdem nett.

Es gibt eine Menge fester Pixelberechnungen in MediaElements.js, aber ich konnte es in der Vergangenheit mit einigen !important-Overrides zu einer flüssigen Breite zwingen.

.mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

Responsives Video?

Erinnern Sie sich, dass responsive Bilder ein heißes Thema sind, weil wir verantwortungsbewusst sein und keine unnötig großen Bilder ausliefern wollen? Video hat dasselbe Problem, nur noch verschärft durch... äh... so viele Frames, wie das ganze Video enthält (wahrscheinlich viele).

Eine halb-holprige Lösung ist, unterschiedliche Videoquellen abhängig von der Browserfensterbreite zu liefern. Ich habe hier ein Tutorial dazu.

Eine andere Lösung ist die Verwendung von Media-Attributen für die Videoquellen und die Hoffnung, dass die Unterstützung besser wird und sie nicht entfernt wird.

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

Die beste Lösung ist die Verwendung eines Videodienstes, und dieser wird es für Sie erledigen.

Flexibles Audio

Sie "sehen" HTML5-Audio nur, wenn Sie explizit das `controls`-Attribut für das Element verwenden.

<audio controls src="audio.ogg">
  <p>Fallback.</p>
</audio>

Die gute Nachricht ist, dass Sie einfach `width: 100%;` auf dieses Ding werfen und es wird flexibel flexibel sein.

audio {
  width: 100%;
}

WebKit-Browser begrenzen die Breite aus irgendeinem Grund auf 800 Pixel. Aber der Player bleibt darin zentriert. Opera und Firefox haben keine solche Begrenzung. Sie haben alle leicht unterschiedliche Player, aber alle machen im Grunde dasselbe (spielen den Ton ab und haben Play- und Pausentasten und so weiter).

Der einzige weitere sehr beliebte eingebettete Soundplayer im Moment ist der SoundCloud-Player und dieser ist standardmäßig flüssig (go team!).