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

The Web Video Text Tracks Format, or WebVTT, is a specification to mark up external text track resources and put them to elements.

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

Video player development isn’t obvious: it includes browser-specific features (e.g. Fullscreen API, Promise, JavaScript modules via script tag, etc), depends on the other libraries which are used (e.g. hls.js, shaka-player, videojs and so on). This is why it’s a general approach to send player events and to analyse data later.

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

The full example is available here. You can see UTC timestamp as , event name as , video id as , etc. The events are send to where is user id. The is https://vfq2nsli1v76fglgdl9puq0cd.litix.io.

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

DRM

All my old courses’ videos(and even the one I purchased now) are MP4. I didn’t find anything that includes DRM. However, the url to the stream includes 2 GET-parameters to have access to it: and , otherwise access is forbidden.

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

Alexey Berezin,
Front-end Developer from Yandex

LinkedIn
GitHub