In het programma Team Scheire werd er voor Wouter een browser plug-in gebouwd dat hem toelaat on-demand content te bekijken met ondertitels die luidop worden gelezen. Voor het luidop lezen wordt er gebruik gemaakt van Speech Synthesis.
Deze plug-in is een voorbeeld en werkt enkel met de web player van VRT Nu. Een gelijkaardige oplossing kan dus worden gebouwd voor andere players waarbij er ondertitels beschikbaar zijn.
Deze plug-in is een voorbeeld en geen productiecode.
De plugin staat nu ook beschikbaar in de chrome web store. Dit is de eenvoudigste manier om hem te installeren.
- Download de laatste release van deze repo (of clone deze GitHub repo en download alles als zip file).
- In Google Chrome, ga naar 'Google Chrome beheren en aanpassen' (die blokjes rechts van je adresbalk).
- Kies Meer hulpprogramma's > Extensies.
- Zet 'Ontwikkelaarsmodus' aan.
- Kies 'Uitgepakte extensie laden'.
- Browse naar de locatie van deze repo en kies de folder
ext_vrtnu. - Er komt mogelijks een optie scherm, dit mag je sluiten.
Rechtsboven in chrome staat nu een extra icoontje. Je kan op de website van VRT Nu naar een anderstalig programma kijken, met hulp van de plug-in. Deze kan je activeren door erop te klikken.
Plug-in icon groen: niet in gebruik.
Plug-in icon rood: actief.
Plug-in icon zwart: de ondertitels zijn niet beschikbaar voor deze video (dit kan gebeuren voor programma's waarbij geen ondertitels werden geleverd).
Voor de VRT site maken we gebruik van HTML5 elementen op de host pagina, om zo vanuit de plug-in de HTML5 <video> aan te spreken. Omdat plug-in's in een 'security sandbox' uitgevoerd worden kunnen we niet aan de JavaScript van de host pagina. We gebruiken content scripts om te communiceren met de host pagina. Meer hier.
Als je zelf een plug-in wenst te bouwen zijn er twee elementen belangrijk:
- Hoe wordt de video geladen en gespeeld. Hoe wordt er gebruik gemaakt van play/pause.
- Hoe worden ondertitels geladen.
Met wat geluk worden de ondertitels geladen als HTML5 element <track>. In dat geval is de kans groot dat je via de content scripts aan de tracks kan. Meer informatie over Tracks en Cues, WebVTT en TTML kan je hier en hier vinden.
- https://developer.chrome.com/extensions/overview
- https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/speechsynthesis/
- Tekst-naar-spraak in web apps: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
In deze plug-in wordt gebruik gemaakt van een externe JavaScript library vtt.js.
See LICENSE