Videoplayer implementeren
De videoplayer is gemakkelijk te plaatsen op je eigen website. De toegankelijke bestanden die je van Scribit.Pro kan downloaden, kan je op de juiste plaatsen in de code zetten. Zo wordt iedere video toegankelijk, met welk device je deze ook benadert.
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.
De HTML-code voor de videoplayer
Wil je alleen gebruikmaken 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>
Voorbeelden Iframes
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:
Jouw video toegangelijk gemaakt met 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.