Responsivt video

2017-11-09

0 kommentarer

Vi har vid ett antal tillfällen behövt hjälpa kunder att få upp videofiler på en responsiv webbplats. Syftet med den responsiva webbplatsen är ju att den ska anpassas efter besökarens webbläsare. Om vi då placerar en video (som har fasta höjd- och breddmått), så anpassas inte den videon ordentligt. För väldigt stora skärmar, så kommer videon visas i ett pyttelitet format – och omvänt så kommer den vara alldeles för stor på en mobilskärm.

Skärmdump som visar en film som en gång är för liten och en gång för stor för innehållet — I skärmdumparna ovan ser du samma film, som är inlagd med fast bredd. I vänstra skärmdumpen är filmen mycket smalare än texten. Det ser inte bra ut.
I högra skärmdumpen (som visar, hur samma sida ser ut på en mobilskärm) får videon inte plats i webbläsarfönstret. Observera hur till och med kontrollerna för filmen inte längre visas eftersom filmen är mycket bredare än skärmen.

Grunden för HTML5-video

Grund-taggen för HTML5-video ser ut enligt nedan:

<video controls>
<source src="film.mp4" type="video/mp4">
</video>

Vi säger i rad 1 att vi vill ha en video med kontroller.

I rad 2, anger vi, var videofilen ligger på servern – och i type-delen, vilket videoformat som filmen är i.

Visa filmen i rätt storlek

Genom ett enkelt tillägg kan vi få videon att visas responsivt:

<video controls style="width: 100%; height: auto;">
<source src="film.mp4" type="video/mp4">
</video>

Genom att i första raden lägga till style="width: 100%; height: auto;", så visas videon så att den fyller ut hela elementet, t.ex. den container som innehåller texten.

Det är åtminstone en början.

Men filstorleken, då?

Ett problem som återstår är att vi nu visar samma film för alla besökare, oavsett om de använder en högupplösande 4K-skärm eller en skruttig mobiltelefon. Om vi vill att filmen ser knivskarp ut för alla besökare, så måste vi ladda upp en högupplöst film. Kruxet är bara att dessa filmer är väldigt, väldigt tunga.

Om vi endast använder en tung film för alla enheter, så kommer det medföra att en person som vill titta på vår film från en mobiltelefon kan tvingas att ladda ner hundratals Megabyte. Datavolymen på mobilen kommer sprängas omedelbums.

Därför behöver vi erbjuda olika storlekar (och kvalitéer) på filmen, beroende på webbläsarens storlek. Det gör vi någorlunda enkelt med hjälp av s.k. media queries, som i exemplet nedan:

<video controls style="width: 100%; height: auto;">
<source src="film_liten.mp4" type="video/mp4">
<source src="film_mellan.mp4" type="video/mp4" media="all and (min-width:481px)">
<source src="film.mp4" type="video/mp4" media="all and (min-width:721px)">
</video>

Det vi gör här är alltså att vi i rad 2 anger den minsta filmstorleken.

I rad tre gör vi ett tillägg: om skärmen är minst 481 pixlar bred (alltså bredare än 480px), så laddar vi den mellanstora filmen istället. Det utökas ytterligare genom rad 4: om skärmen är minst 721 pixlar bred, så laddas den stora versionen.

Etiketter:

HTML5