Fluid video en audio

Fluid videoalso: audio

Externe video

1

Gebruik de embed code

Verwijder width en height attributen voor fluid video

<iframe src="//player.vimeo.com/video/107231188?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Voeg een container toe

<div class="videocontainer"> <iframe src="//player.vimeo.com/video/107231188?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>

CSS code voor fluid video!

.videocontainer { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videocontainer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

CSS oplossingen uit deze artikels

Video met verschillende aspect ratio’s of van verschillende bronnen?

HTML5 video

2

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

Even eenvoudig als img

Perfect in sommige browsers

Kapot in andere

Check caniuse.com voor ondersteuning: afhankelijk van platform en de versie van het besturingssysteem.

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

Het webm formaat toevoegen

webm is ontworpen om rechtenvrije hogekwaliteitsvideo te leveren met uitstekende compressie voor gebruik op het web.

Gebruik Miro of Firefogg om te converteren naar webm en mp4

Perfect in alle moderne browsers

video wordt erg goed ondersteund

Meer informatie over codecs etc.

<video controls> <source src="film.webm" type="video/webm"> <source src="film.mp4" type="video/mp4"> Je browser kent het video element niet. Je kan het filmpje <a href="film.mp4">hier downloaden</a> en afspelen op je computer. </video>

Fall-back voor browsers die video niet ondersteunen

<video controls> <source src="film.webm" type="video/webm"> <source src="film.mp4" type="video/mp4"> <object data="film.swf" type="application/x-shockwave-flash"> <param value="film.swf" name="movie"/> </object> </video>

Fall-back naar flash of een beeldje

<video controls> <source src="film.webm" type="video/webm"> <source src="film.mp4" type="video/mp4"> <img src="video-still.jpg" alt="video still"> </video>

Video attributen

<video src="film.webm" controls>

met of zonder

<video src="film.webm" autoplay>

• Browser zal het filmpje meteen downloaden en afspelen van zodra dat lukt.

• Vergeet niet dat mobiele browsers altijd een druk (klik) van de gebruiker vereisen.

• Usability tip: de meeste gebruikers vinden autoplay niet zo leuk.

<video src="film.webm" preload="none">

• none: gebruiker zal het filmpje wellicht niet bekijken, best zo weinig mogelijk downloaden

• metadata: gebruiker zal misschien kijken, dus download de metadata (afmetingen, duur…)

• auto: gebruiker zal wellicht kijken, dus het wordt aangeraden het filmpje te downloaden

auto none

metadata

<video src="film.webm" preload="metadata">

<video src="film.webm" poster="still.png">

<video src="film.webm" height="300" width="800">

<video src="film.webm" controls muted>

<video src="film.webm" controls loop>

Media fragments

<video controls> <source src="film.webm#t=10,20" type="video/webm"> <source src="film.mp4#t=10,20" type="video/mp4"> Geen HTML video support. Sorry. </video>

Welk deeltje afspelen?

<video controls> <source src="film.webm#t=00:01:00,00:01:23" type="video/webm"> <source src="film.mp4#t=00:01:00,00:01:23" type="video/mp4"> No HTML video support. Sorry. </video>

Welk deeltje afspelen?

Captions & subtitles

<video controls> <source src="film.webm" type="video/webm"> <source src="film.mp4" type=“video/mp4"> <track src="film-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default></track> No HTML video support. Sorry. </video>

Subtitles via track

• label: zal getoond worden aan de gebruiker in de UI • default: vertel de browser dit als standaard te gebruiken (als er

meerdere tracks zijn) • kind: subtitles, captions, screen reader descriptions, of chapters

Een voorbeeld vtt bestand voor track

vtt = web video text track

Onthou

• track maakt video toegankelijk voor screen readers, zoekmachines…

• De meeste browsers ondersteunen track nu eindelijk

Meer over track

Styling video

video { display: block; margin: 50px auto 0 auto; box-shadow: 0 0 45px 0 rgb(100,100,100); border-radius: 5px; opacity: .6; }

It’s just HTML!

video { width:100%; height:auto; }

Fluid video!

HTML5 audio

3

<audio controls> <source src="elvis.mp3" type="audio/mpeg"> <source src="elvis.ogg" type="audio/ogg"> Je browser kent het HTML5 audio element niet. <a>Download de mp3.</a> </audio>

Even eenvoudig als video

mp3 en ogg voor de grootste browserondersteuning

Je kan opnieuw Miro gebruiken om te converteren naar mp3 en ogg

Je kan ongeveer dezelfde attributen gebruiken voor audio als voor

video, en je kan ook hier captions toevoegen met track.

Meer weten?

Links en bronnen

• html5doctor.com • w3.org • html5rocks.com • developer.mozilla.org • diveintohtml5.info • teamtreehouse.com