Videoplayer implementeren

Je kunt de videoplayer in je website integreren door middel van een HTML-code. Om de video volledig toegankelijk aan te kunnen bieden heb je daarvoor, naast je video, de volgende aanvullende bestanden nodig:

  • een MP3-bestand met de audiodescriptie
  • een SRT-bestand met de ondertiteling
  • een TXT-bestand met het tekstalternatief
  • (optioneel) een MP4-bestand met een gebarenvideo

Mocht je video deze bestanden niet hebben, dan kun je ze maken in de editor van scribit.pro. Vanuit onze editor en jouw eigen dashboard kun je dan eenvoudig de bestanden insluiten en wordt de html-code automatisch gegenereerd. Je hoeft deze dan alleen nog in je website te plakken.

Wil je weten hoe dat werkt, lees dan de uitleg over het insluiten
.

De HTML code voor de videplayer

Wil je alleen gebruik maken van de video en heb je zelf de aanvullende bestanden al beschikbaar? Maak dan gebruik van onderstaand iframe om jouw video in onze toegankelijke player op je website te kunnen plaatsen.

<iframe scrolling=”no” frameborder=”0″ data-resize allowfullscreen=“true” src=”https://video-player.scribit.pro/?video=vul hier de url naar je video in&subtitles=vul hier de url naar je ondertiteling in&audioDescription=vul hier de url naar je audiodesciptie in&videoDescription=vul hier je url naar je gebarenvideo in&alternativeText=vul hier je url naar je tekstalternatief in&thumbnail=vul hier de url naar je thumbnail in&skin=2″ style=”width:vul hier de gewenste wijdte van je iframe in;” data-resize allowfullscreen=”true” ></iframe>

Na het uploaden van de benodigde media op je website of CDN, kan je deze insluiten in het <iframe>. Vervang daarvoor de onderstreepte tekst met de links naar je media, zodat deze worden ingeladen in de videoplayer. Voor het nummer van de skin vul je 1 of 2 in om een van de twee Scribit-Pro-skins te kiezen. Voor de gewenste breedte vul je in hoe breed je de player wilt maken. Dit mag in pixels (bv. 800px) of een percentage (bv. 50%).</p>

Met deze code past de hoogte zich automatisch aan aan het formaat van de video en de breedte die je hebt ingesteld. De hoogte zal zich ook automatisch aanpassen wanneer de gebruiker het tekstalternatief in- of uitklapt. Voor deze mogelijkheid moet je de volgende regel code aan je HTML-broncode toevoegen. Let op: je hoeft deze regel slechts één keer toe te voegen, zelfs als je meerdere <iframe>’s op je webpagina zet. Zet hem bijvoorbeeld in de <head>.

<script defer src=”https://video-player.scribit.pro/iframe-resize.js”></script>

Bekijk ook de voorbeelden van de manier waarop het iframe wordt weergegeven, zodat je weet wat de beste manier is.

Je kunt voor de styling van de player kiezen uit verschillende uitvoeringen. In de HTML-code geef je de voorkeur weer als skin=1 of skin=2

Hieronder een voorbeeld van de uitvoeringen:

skin 1
skin 2
Skip to content