Zodat we allemaal even kunnen wegdromen, hier een voorbeeld van hoe je video's klassiek in een website kunt integreren:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" breedte="425" hoogte="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versie=6,0,40,0"> <param naam="allowFullScreen" waarde="true" /> <param naam="allowscriptaccess" waarde="always" /> <param naam="src" waarde="http://www.youtube.com/v/oHg5SJYRHA0&hl=nl&fs=1&" /> <param naam="allowfullscreen" waarde="true" /> <embed type="application/x-shockwave-flash" breedte="425" hoogte="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=nl&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Zo'n syntaxis is natuurlijk allesbehalve mooi.
Zelfs als we het esthetische aspect even buiten beschouwing laten: de syntaxis is in deze vorm simpelweg te foutgevoelig en te complex. In HTML5 kunnen video's veel eenvoudiger worden ingesloten. Hiervoor wordt het video-element gebruikt.
Hier een voorbeeld van hoe je dat video-element kunt insluiten:
<video src="video.ogv" breedte="300" hoogte="200"> Uw browser ondersteunt helaas geen HTML5 </video>
Dit is in deze vorm de eenvoudigste variant. Drie attributen zijn echter essentieel bij deze syntaxisvorm. Met src wordt de video aangegeven die moet worden ingesloten. Let hierbij zeker op de juiste padverwijzing. De twee attributen breedte en hoogte bepalen de breedte en hoogte van de video. Als geen van beide waarden wordt opgegeven, wordt de video weergegeven in de oorspronkelijke grootte. Geef je slechts één van beide waarden op, dan wordt de andere waarde automatisch berekend door de browser. Het autoplay-attribuut instrueert de browser om de video automatisch af te spelen zodra de pagina is geladen. Dit attribuut moet normaal gesproken niet worden ingesteld, aangezien automatisch afspelen meestal niet door gebruikers wordt gewenst. Dit geldt des te meer voor gebruikers die mobiele apparaten met een beperkte bandbreedte gebruiken.
Nog een interessant attribuut is controls. Als u dit attribuut gebruikt, zal de browser native bedieningselementen voor afspelen en volume weergeven.
<video src="video.ogv" breedte="300" hoogte="200" controls> Uw browser ondersteunt helaas geen HTML5 </video>
Dit is het resultaat in de browser:
Met de weergegeven balk kunt u de video niet alleen pauzeren en opnieuw starten, maar ook de volumeregeling is erin opgenomen.
Met het poster-attribuut kunt u een afbeelding opgeven die wordt weergegeven totdat de video begint. Hiervoor wordt het poster-attribuut gebruikt.
<video src="video.ogv" breedte="300" hoogte="200" poster="video.gif"> Uw browser ondersteunt helaas geen HTML5 </video>
Let ook hier weer op de juiste padverwijzing, zodat de afbeelding daadwerkelijk wordt weergegeven.
Voorzichtigheid is geboden bij het gebruik van het autoplay-attribuut. Dit attribuut bepaalt namelijk dat de video automatisch moet afspelen zodra deze beschikbaar is.
<video src="video.ogv" breedte="300" hoogte="200" autoplay> Uw browser ondersteunt helaas geen HTML5 </video>
Wat betreft het verkeer kan het preload-attribuut interessant zijn. Dit attribuut regelt namelijk het voorladen van bestanden. Hierbij kan het attribuut de volgende waarden aannemen:
• auto – De browser kan het hele bestand voorladen.
• none – Het bestand hoeft niet vooraf te worden geladen.
• metadata – Het bestand kan vooraf worden geladen.
Ontbreekt het preload-attribuut, dan worden de standaardinstellingen van de browser toegepast.
Video's en de Codecs
Wie zich bezighoudt met het insluiten en afspelen van video's op websites, zal vroeg of laat te maken krijgen met het probleem van de verschillende codecs. Dankzij deze codecs kunnen video's efficiënt worden gecomprimeerd en gedecomprimeerd. Het probleem is echter dat de browserfabrikanten tot op heden nog geen gemeenschappelijk codec-formaat hebben kunnen overeenkomen. Dit betekent voor HTML5 (en dus uiteindelijk ook voor u) dat er geen uniforme codecs zijn voor video's en audiobestanden.
Voor video's hebben inmiddels de formaten Ogg en MP4 zich gevestigd. Daarom zit u eigenlijk altijd goed als u de video in deze beide formaten aanbiedt. Hiervoor wijst u het video-element twee source-elementen toe.
<video breedte="400" hoogte="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Je geeft hier dus de videobron niet aan binnen het video-element. In plaats daarvan worden er alleen algemene informatie over de weergave gegeven. Welke video moet worden weergegeven, wordt bepaald door het source-element. Aan het src-attribuut wordt de betreffende video toegewezen. Achter type volgt de opgave van het type video of in welk formaat de video beschikbaar is.
Als er meerdere source-elementen zijn opgegeven, speelt de browser altijd de eerste video af die "past". Wat "past" betekent, wordt hieronder beschreven.
Maar welk formaat ondersteunt welke browser eigenlijk? Het antwoord op die vraag wordt gegeven in de onderstaande tabel.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Vanaf versie 9 | |
| Mozilla Firefox | Ja | |
| Google Chrome | Ja | Ja |
| Opera | Ja | |
| Safari | Ja | |
| iPhone | Ja | |
| Android | Ja |
De tabel laat het dilemma duidelijk zien: De interpretatie van de formaten is bijna gelijk verdeeld over de verschillende browsers. Daarom is men bijna gedwongen om video's in beide formaten op te geven.
Met het media-attribuut, dat uitsluitend aan het source-element kan worden toegewezen, kan men overigens expliciet aangeven voor welk type media de video geschikt is. Om video's specifiek voor bepaalde apparaten op te geven, moet aan src het media-attribuut worden toegewezen. Met dit media-attribuut geeft men het gewenste mediatype aan.
Een mogelijke toepassing voor het source-element zou als volgt kunnen worden weergegeven:
<video width="400" height="300">
<!-- Alleen voor mobiele apparaten -->
<source src="video_mobil.ogg" media="handheld" />
<!-- Alle andere apparaten -->
<source src="video_normal.ogg" media="all" />
</video>
Met het media-attribuut wordt gecontroleerd of het om een mobiel apparaat gaat. In dat geval wordt een video in een kleiner formaat afgespeeld. Als het om een ander apparaat gaat, wordt de all-waarde gebruikt.
Video's veilig invoegen
HTML5 wordt zoals bekend nog lang niet door alle browsers ondersteund. Dit geldt natuurlijk ook voor het video-element. Een oplossing wordt geboden door de combinatie van verschillende invoertechnieken. Hierbij worden de bekende object- en embed-elementen gecombineerd met video. Dat zou er als volgt uit kunnen zien:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Video's die op deze manier zijn ingevoegd, zullen in de meeste browsers kunnen worden afgespeeld. Browsers die het video-element kennen, zullen dit gebruiken. Andere browsers daarentegen maken gebruik van de informatie in het object- of het embed-element.
