Video op je website met HTML5


vrijdag 7 oktober 2016

Na wat eenvoudige berichten te hebben geplaatst op mijn blog is het nu tijd voor wat meer gevorderde informatie.

HTML5 wordt de nieuwe standaard voor het bouwen van webpagina’s. Voor webbouwers biedt HTML5 weer nieuwe kansen. Maar ook op het gebied van SEO is HTML5 een grote stap voorwaarts.

Zoekmachines weten door gebruik van de nieuwe tags precies waar ze de belangrijke teksten kunnen vinden. De voornaamste verandering zijn dan ook de nieuwe tags die gebruikt kunnen worden. Zoals <header>, <footer>, <nav>, <article> en nog een aantal andere. Een van de, naar mijn mening, mooiste aanpassing is de <video> tag. Deze nieuwe tag maakt het mogelijk om interactieve content te gebruiken zonder tussenkomst van een Flash Player plugin. Ook het embedden van bijvoorbeeld een YouTube filmpje is niet meer nodig. Het videofilmpje staat daadwerkelijk op de webserver en is niet afhankelijk van een flashplayer.

Over deze HTML5 Video tag wil ik toch even wat meer informatie geven.

De inspiratie daarvan is een Engelstalige website die bijzonder veel en duidelijke informatie geeft over HTML5. Dive into html5. Met deze en andere info ben ik gekomen tot onderstaand blogartikel.

De Video tag

Wat voorheen mogelijk was met Flashplayers, Youtube embedding en andere video players is nu direct mogelijk met de <video> tag. Het afspelen van beelden en geluid op een webpagina.

Met de beloofde standaard WebM zou dat dus allemaal een eenvoudige code moeten worden.

Met de code

<video src=”filmpje.webm”></video>

zouden we ons “filmpje” kunnen afspelen.

Maar niets is minder waar. Dat dit gaat werken klopt, maar zeker niet in alle browser en ook niet op alle computers. “Maar er was ons toch één standaard beloofd”? Ja, dat klopt! Maar zoals met zoveel ander standaarden probeert ook hier weer iedereen zelf het wiel uit te vinden. Allereerst zitten we met het probleem van de verschillende browsers. Onderstaand een overzicht van de browser die kunnen omgaan met de HTML5 <video> tag.

  • Internet Explorer vanaf 9.0
  • Firefox vanaf 3.5
  • Safari vanaf 3.0
  • Chrome vanaf 3.0
  • Opera vanaf 10.5
  • iPhone van 1.0
  • Android vanaf 2.0

Alle oudere versie kunnen dus niet omgaan met deze nieuwe tag. Daarnaast is het probleem dat niet alle browser het webM formaat ondersteunen. Daarom heb ik onderstaand een overzicht gemaakt welke formaten worden ondersteund door bovenstaande browsers.

  • Internet Explorer vanaf 9.0 WebM en MP4
  • Firefox vanaf 3.5 Ogv
  • Firefox vanaf 4.0 WebM
  • Safari vanaf 3.0 MP4
  • Chrome vanaf 3.0 Ogv en WebM
  • Opera vanaf 10.5 Ogv en WebM
  • iPhone van 1.0 MP4
  • Android vanaf 2.0 MP4
  • Android vanaf 2.3 WebM

Dat is mooi dan. Dat betekent dus dat voor zowat elke browser een andere versie zal moeten worden geplaatst. Klopt! En om dat werkend te krijgen zal je toch wat meer code moeten gaan schrijven dan:

<video src=”filmpje.webm”></video>

Hoe gaan we dit doen?

Allereerst zal je moeten zorgen dat jouw filmpje geconverteerd wordt naar de diverse formaten. We gaan uit van drie formaten, WebM, ogv en mp4.

Dat converteren doe je het eenvoudigste met Miro converter. Miro werkt erg eenvoudig. Je kiest de file die je wil gaan omzetten (Hij slikt bijna elke extensie) en in de dropdown kies je de uitvoermethode. Je kiest daar achtereenvolgens, Theora (maakt de ogv file), WebM en MP4. Natuurlijk zijn er diverse andere programma’s die dit trucje kunnen klaren, maar dit vond ik toch wel de eenvoudigste. Als je daarmee klaar bent heb je de volgende bestanden gecreëerd.

filmpje.theora.ogv
filmpje.webmvp8.webm
filmpje.mp4video.mp4

De naam mag je wijzigen als je de extensie maar laat zoals hij is.

Wat nu nog rest is de code:

We beginnen met de video tag

<video>

En sluiten hem direct even zodat we dit later niet vergeten.

<video></video>

Tevens geven we hem een id en een naam, zodat we hem ook in de css kunnen opmaken. De afmeting van de video geef ik hier ook direct op.

<video id=”film” width=”266″ height=”192″> </video>

Om de video ook de nodig “handvaten” te geven zetten we in de tag “controls”. Dit zorgt voor de nodige “knoppen”. De preload zegt wat het doet. Het laad het filmpje bij het openen van de webpagina.

<video id=”film” width=”266″ height=”192″ preload controls></video>

Dan volgt de src code:

<video id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” />
<source src=” filmpje.ogv” />
<source src=” filmpje.mp4″ />
</video>

Om er voor te zorgen dat de webm file en de ogv juist geïnterpreteerd wordt door de browsers zijn er nog een “type” nodig en moeten de “codecs” worden opgegeven. Ik ga je niet vermoeien met het waarom, maar het is gewoon noodzaak. Je kunt daarover meer lezen op de site van dive into html5.

<video id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=” filmpje.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<source src=” filmpje.mp4″ />
</video>

Nu zullen we de oudere browsers nog moeten bedienen. Dat doen we door middel van het plaatsen van een flashplayer. Het MP4 bestand gaan we af laten spelen met flowplayer. Flowplayer kan je hier downloaden. De flowplayer plaats je op je server. De code die je toevoegt zorgt dan voor een zichtbare player. Even de url aanpassen en hij zal zijn werk doen.

<video id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=” filmpje.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<source src=” filmpje.mp4″ />
<object width=”266″ height=”192″ type=”application/x-shockwave-flash” data=”flowplayer-3.2.1.swf”>
<param name=”movie” value=”flowplayer-3.2.1.swf” />
<param name=”allowfullscreen” value=”true” />
<param name=”flashvars” value=’config={“clip”: {“url”: “http://jouwdomein.nl/filmpje.mp4″, “autoPlay”:false, “autoBuffering”:true}}’ />
</object>
</video>

Wat we nu nog missen is een stukje code dat er voor zorgt dat het ook zichtbaar is in Android browsers.

<script>
var v = document.getElementById(“movie”);
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>

De complete code ziet er dan dus als volgt uit:

<video id=”movie” width=”266″ height=”192″ preload controls>
<source src=”filmpje.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=” filmpje.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<source src=” filmpje.mp4″ />
<object width=”266″ height=”192″ type=”application/x-shockwave-flash” data=”flowplayer-3.2.1.swf”>
<param name=”movie” value=”flowplayer-3.2.1.swf” />
<param name=”allowfullscreen” value=”true” />
<param name=”flashvars” value=’config={“clip”: {“url”: “http://jouwdomein.nl/filmpje.mp4″, “autoPlay”:false, “autoBuffering”:true}}’ />
</object>
</video>
<script>
var v = document.getElementById(“movie”);
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>

Tijd om te testen!

Veel kans dat het NIET gaat werken. Wat je nog mist is een MIME type. Om niet uit te wijden over wat dat precies is
verwijs ik naar Google! Daar vind je over dit onderwerp van alles.

Wat je nodig hebt is een .htaccess file in de directory waar ook de film bestanden staan. Zo’n file maak je simpel in bijv. kladblok (notepad). Zet de volgende tekst in een leeg document:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType application/x-shockwave-flash swf

Sla het bestand op zonder als .htaccess en vergeet niet de extensie (.txt) te verwijderen. Zet het bestandje op je server in de folder waar de filmpjes staan.

En hopla! Je hebt een filmpje wat crossbrowser te zien zal zijn. Succes ermee

Het laatste waar ik nog tegenaan liep is dat sommige webservers niet kunnen omgaan met de nieuwe html video tag. Waarom? Ik heb geen idee. Vragen daarover op diverse fora en aan de helpdesk van de webhoster hebben niets uitgehaald. Hopend dat deze webhosting bedrijven gaan begrijpen dat HTML5 toch echt de nieuwe standaard gaat worden.

 


Reacties


Voeg een reactie toe op dit bericht.
Houd mij op de hoogte van nieuwe reacties op deze pagina