What's inside Udemy player

Udemy player page

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 <track> 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:

VTT subtitles file structure

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

VTT thumbnail sprites file structure

VideoJS sneakpeek is used to parse VTT sprites. Find more at videojs-sneakpeek

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 XMLHttpRequest in _sendBeaconQueue for synchronous and sendBeacon in _clearBeaconQueue for asynchronous requests. The data is sent as a sequence of events.

Statistics synchronous event example

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.

Statistics asynchronous event example

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

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: nva and token, otherwise access is forbidden.

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:

Udemy player MEDIA_ERR_SRC_NOT_SUPPORTED error

player

Let's chat and have fun 🧑‍💻👩‍💻

No more often than once a week I write 📄 about TypeScript 💪, video playback 📺 and frontend related topics. You can unsubscribe in any time ↘️