Embed video in a fluid way or use flexible HTML5 video.

1. Fluid video
also: audio

2. Externe video
1

3. Gebruik de embed code

4. 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>

5. 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>

6. 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%;
}

7. CSS oplossingen uit deze artikels

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

9. HTML5 video
2

10. <video src="film.mp4" controls></video>
Even eenvoudig als img

11. Perfect in sommige browsers

12. Kapot in andere
Check caniuse.com voor ondersteuning: afhankelijk van platform en
de versie van het besturingssysteem.

13. <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

14. Perfect in alle moderne browsers

15. video wordt erg goed ondersteund

16. Meer informatie over codecs etc.

17. <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

18. <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>

19. Video attributen

20. <video src="film.webm" controls>
met of zonder

21. <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.

22. <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

23. auto none
metadata
<video src="film.webm" preload="metadata">

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

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

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

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

28. Media fragments

29. <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?

30. <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?

31. Captions & subtitles

32. <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

33. Een voorbeeld vtt bestand voor track
vtt = web video text track

34. Onthou
• track maakt video toegankelijk voor screen
readers, zoekmachines…
• De meeste browsers ondersteunen track nu
eindelijk

35. Meer over track

36. Styling video

37. 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!

38. video {
width:100%;
height:auto;
}
Fluid video!

39. HTML5 audio
3

40. <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

41. mp3 en ogg voor de grootste
browserondersteuning
Je kan opnieuw Miro gebruiken om te converteren naar mp3 en ogg

42. Je kan ongeveer dezelfde attributen
gebruiken voor audio als voor
video, en je kan ook hier captions
toevoegen met track.

43. Meer weten?

44. Links en bronnen
• html5doctor.com
• w3.org
• html5rocks.com
• developer.mozilla.org
• diveintohtml5.info
• teamtreehouse.com