In het vorige deel van de Ultieme handleiding voor Online Video zijn we even stil blijven staan bij de verschillende videoformaten en hebben we gekeken naar de mogelijkheden om die te gebruiken in je webpagina. En we waren het er eigenlijk wel over eens, dat wanneer we vandaag de dag video in onze website op willen nemen, er maar een aantal mogelijke bestandsformaten in aanmerking komen, namelijk MP4, WebM en Ogg. Dat is natuurlijk allemaal mooi en aardig, maar welk van deze drie willen we nu precies gebruiken?
Het antwoord op deze vraag is eenvoudig. Allemaal.
Tenzij je geen andere mogelijkheden hebt, wil je al deze formaten in je videospeler kunnen gebruiken, want je weet nooit met welke browser je pagina wordt bezocht.
Maar hoe doe je dat dan?
Gelukkig biedt HTML5 voldoende ondersteuning om dit ook mogelijk te maken. En hoewel dit een blog over WordPress is en de meeste lezers van deze blog waarschijnlijk nooit zelf met HTML zullen hoeven te werken, is het voor een goed begrip toch belangrijk om eens te kijken hoe dit nu precies werkt. Wanneer we kijken naar de HTML code die we moeten gebruiken om video op te nemen in een webpagina, ziet deze er ongeveer als volgt uit :
Wat ik hier aan de browser vertel is, webm te laden, als hij dat begrijpt, anders mp4 en als hij beiden niet begrijpt het bestand in het ogg formaat (de ogv extensie)
Ik geef de browser dus de keuze één van deze bestanden te laden. Het bestand wat hij het eerst tegenkomt in de lijst en begrijpt, zal hij dan ook daadwerkelijk gebruiken. Zo eenvoudig is het dus. Probleem opgelost. Of toch niet?
Nee dus!
XHTML en HTML4
Het eerste struikelblok wat we tegen komen is dat er misschien mensen met een verouderde browser naar je site komen. Als ik zeg ‘verouderd’ dan bedoel ik eigenlijk ‘bijna antiek’, want HTML5 is nu al weer heel wat jaartjes de standaard, maar het is mogelijk. Mocht je ook ondersteuning voor die mensen willen bieden, dan is een ‘fallback’ naar Flash noodzakelijk. Wordt de ‘video’ tag niet begrepen door de browser, dan kan je proberen ‘Flash’ te laden en hierin je video te laten zien. Persoonlijk denk ik, dat het beter op zijn plaats is om de bezoeker er op te wijzen, dat hij toch zijn browser eens moet updaten. Kijk eens naar de toevoeging op de code :
<video class="video" poster="/videos/poster.jpg" preload="" controls="controls" width="618" height="347">;
<source src="/videos/video.webm" />
<source src="/videos/video.mp4" />
<source src="/videos/video.ogv" />
Gefeliciteerd. Je gebruikt een browser die zo oud is,
dat je hem bijna als antiek kan verkopen.
de video te zien is het echter beter een nieuwere versie van je browser te installeren.
</video>
De tekst die hierboven is toegevoegd krijgt je bezoeker alleen te zien, wanneer zijn browser hopeloos verouderd is.
Resoluties: Over grote en kleine bestanden
In het vorige artikel in deze reeks hebben we het al even gehad over de resoluties van video bestanden. Op onze telefoon krijgen we het liefst geen video bestanden in een te grote resolutie. Het vreet onze belbundel leeg en bovendien moet de processor in de telefoon heel wat rekenen om dat te grote beeld kleiner te maken. Niet goed voor de batterij dus.
We willen het bestand het liefst in de buurt van de grootte van ons scherm ontvangen om af te spelen. Daar hebben de makers van HTML5 geen oplossing voor bedacht. Er is echter een tweetal trucs mogelijk om dit toch voor elkaar te krijgen.
De eerste truc werkt op bijna alle apparaten, behalve in de Safari browser. Het is echter een ‘niet gedocumenteerd’ gebruik van CSS en het is goed mogelijk dat in toekomstige versies dit niet meer mogelijk is. Stel dat we onze video in twee resoluties aan willen bieden: 480p en 720p. Dan zouden we bijvoorbeeld onderstaande truc kunnen gebruiken.
Ik gebruik hier de breedte van 640 pixels, omdat deze ‘hoort’ bij een 480p video resolutie.
Een andere, wat nettere -maar complexere- manier is gebruik te maken van jQuery en MediaElement.js.
We gaan er even van uit, dat jij voldoende ervaring met jQuery hebt, om de gebruikte variabelen die we invoegen voor de instellingen de juiste waarden te geven.
var mainVideo = $('#the-video');
if ($(window).width() < 1200 && medQualVersion) {
mainVideo.append("<source type='video/mp4' src='" + medQualVersionSrc + "' />");
} else {
mainVideo.append("<source type='video/mp4' src='" + highQualVersionSrc + "' />");
}
mainVideo.append("<source type='video/webm' src='" + webMSrc + "' />");
// Wait until sources are appended to call MediaElements.js
mainVideo.mediaelementplayer();
Video gebruiken in je WordPress pagina
Het probleem is dus duidelijk. Je wilt een tweetal zaken flexibel in kunnen stellen. Het gebruikte bestandsformaat en de gebruikte resolutie. Het invoegen van video in je WordPress pagina zelf is zo moeilijk niet. Sinds 3.2 is het gewoon een kwestie van het plakken van de video URL. Dank zij de ondersteuning door MediaElement.js wordt de video dan getoond. Maar WordPress biedt geen ondersteuning om ook meerdere videobestanden naast elkaar te kunnen gebruiken.
Tot op vandaag heb ik maar twee gratis spelers gevonden die dit wel ondersteunen.
De eerste speler is de H5P videospeler, die je ook in actie kan zien in dit blogartikel.
De tweede is een aardige. Switch Video Quality. Deze maakt namelijk gebruik van de MediaElement.js speler die al standaard in WordPress is ingebouwd. Ik denk dat dit -geheel ten onrechte- één van de minst bekende video plugins voor WordPress is. Maar door ‘video playlist’ te maken in WordPress kan je deze met behulp van deze plugin ‘ombouwen’ tot een speler waar je niet alleen standaard de meest passende video krijgt aangeboden, maar ook nog eens de mogelijkheid hebt om een andere versie te kiezen. Zeer aan te bevelen. In een toekomstig blogartikel zal deze plugin zeer zeker in meer detail worden besproken.
Ondersteuning met wel heel veel shortcodes
Een andere manier om het toch te ondersteunen is gebruik te maken van een aparte plugin, die kijkt of je de pagina van een mobiel device bekijkt of niet. De beste plugin op dit gebied is denk ik wel WP Mobile Detect. Dit is een al wat oudere plugin, maar werkt nog steeds prima samen met de huidige versie van WordPress.
Gebruik je een plugin die wel verschillende bestandsformaten, maar geen verschillende resoluties ondersteunt, kan een dergelijke plugin uitkomst bieden.
Dit is echter een oplossing die ik alleen een ‘poweruser’ aan zou raden. Door de vele shortcodes die je nodig hebt, is deze oplossing voor de minder ervaren gebruiker niet zo wenselijk.
Met WP Mobile Detect en de ARVE video plugin, kan je de juiste video op het juiste device afleveren.
Nog niet uitgelezen?
Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.
Wanneer deze post niet meer relevant is of verouderde informatie bevat, zou ik het op prijs stellen wanneer je dit door wilt geven., zodat ik dit eventueel bij kan werken. De persoonlijke gegevens die je hieronder invult worden alleen gebruikt om de mail te versturen en zal niet voor marketingdoeleinden worden gebruikt.
