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 <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:
Udemy also uses WebVTT to show a popover using thumbnail sprites:
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.
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
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:
