Video.JS: wat het is en waarvoor je het kunt gebruiken
Video.JS is, zoals de naam al zegt, JavaScript dat zich bezighoudt met video. Het is echter meer dan alleen dat. Er is ook
CSS bij betrokken, dat maakt het tot een compleet platform.
Video.JS is een open-source project dat wordt gesteund door Brightcove, een bedrijf dat video-oplossingen levert voor de cloud. Het geeft nuttige uitbreidingen voor de video-tag van HTML5. Zo is het mogelijk om Flash-video af te spelen en kun je de opmaak van de controls aanpassen via CSS.
Op het moment dat dit wordt geschreven is 5.0.0 het geldige versienummer.
Op het eerste gezicht lijkt gebruiken van Video.js op hogeschoolwerk. Als je je beperkt tot default-instellingen valt het
allemaal reuze mee.
Het opvallende bij dit platform is dat je het niet kant-en-klaar kunt downloaden. Je bent -althans voor het JavaScript-
aangewezen op een Content Delivery Network (CDN). Dat heeft het
voordeel dat je altijd de meest recente versie van de code gebruikt.
Een default-versie van de benodigde CSS staat op hetzelfde CDN. Als je de mediaspeler wilt aanpassen aan je eigen wensen, kun je zelf je eigen skin maken. Dat doe je met de Video.js Skin Maker, die wordt gehost door CodePen. Daarmee maak je de code aan die de default-waarden overschrijft.
Een uitgebreide set plug-ins is beschikbaar om de functionaliteit van de speler uit te breiden, o.a. voor het werken met afspeellijsten en het opnemen van films.
Video.JS in de praktijk
Hieronder staat een eenvoudige HTML-code, die is overgenomen van de Video.JS
website. Zoals je ziet lijkt het heel veel op de standaard
HTML5 <video>-tag. Er zijn wat uitbreidingen, nl. het style-sheet en
twee JavaScript bestanden.
<!doctype html>
<html>
<head>
<link href="https://vjs.zencdn.net/5.0.0/video-js.css" rel="stylesheet">
<!-- Ondersteuning voor IE8, anders weglaten -->
<script src="https://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js">
</script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto"
width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">
Om deze video te bekijken moet JavaScript ingeschakeld zijn en/of
upgrade naar een browser die
<a href="https://videojs.com/html5-video-support/" target="_blank">
HTML5 video</a> ondersteunt.
</p>
</video>
<script src="https//vjs.zencdn.net/5.0.0/video.js"></script>
</body>
</html>
Het style-sheet staat in de <head>, evenals een JavaScript bestand dat zorgt voor ondersteuning voor Internet Explorer
versie 8. Dit JavaScript is in Nederland eigenlijk niet meer nodig.
Het JavaScript voor het aansturen van de video staat helemaal aan het einde van de HTML, net voor de </body>-tag.
De classes in de verschillende tags staan in het stylesheet. Die kun je aanpassen aan je eigen wensen door het default
style-sheet te vervangen door je eigen versie.
De id in de <video>tag is nodig voor de communicatie tussen het platform en de HTML-code.
