What’s inside Udemy player?

I’ve discovered Udemy as a service around 5–6 years ago. Below you can read what I found interesting having a look at the player during several hours.

WebVTT

There is an implementation for Node.js and browsers which is called vtt.js (versions by VideoJS and Mozilla).

It turns out Udemy uses VideoJS version 0.12.4 (28 Apr 2017) as a fallback value. The version for me was 0.12.6 (13 Feb 2018).

VTT-files look like that:

innerText is updated based on data from VTT

Udemy also uses WebVTT to show a popover using thumbnail sprites:

VideoJS sneakpeek is used to parse VTT sprites. Find more at videojs-sneakpeek
left, top and clip are changed based on data from VTT

Statistics

Udemy uses XMLHttpRequest in _sendBeaconQueue for synchronous and sendBeacon in _clearBeaconQueue for asynchronous requests. The data is sent as a sequence of events.

The full XMLHttpRequest example is available here. You can see UTC timestamp as uti, event name as e, video id as vid, etc. The events are send to https://<ake>.litix.io where <ake> is user id. The beaconUrl is https://vfq2nsli1v76fglgdl9puq0cd.litix.io.

The full sendBeacon example is available here. You can see more data about browser, OS, libraries, content, course and so on and so forth. The beaconUrl here is https://vfq2nsli1v76fglgdl9puq0cd.litix.io as well.

DRM

Video tag element contains the source to the stream and plays it just fine. If you try to put src without those parameters, you will get the error:

Alexey Berezin,
Front-end Developer from Yandex

LinkedIn
GitHub