Custom key acquisition for encrypted HLS in VideoJS

What do we have for starter

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=1600000,RESOLUTION=854x480
sd/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3200000,RESOLUTION=1280x720
hd/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5300000,RESOLUTION=1920x1080
fhd/index.m3u8
# EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:6
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-KEY:METHOD=AES-128,URI="key://0.key",IV=0x9C2403588BE41A691A73E686170DD85A
#EXTINF:5.760000,
index0.ts
#EXTINF:5.760000,
index1.ts
#EXT-X-KEY:METHOD=AES-128,URI="key://2.key",IV=0x372F336A8156359866D2AA7419A9B0F3
#EXTINF:3.840000,
index2.ts
...

Initalizing the player

Failed to load key://0.key: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Adding XHR interceptor

  • player.ready will fire when the player is ready but the manifest file is not yet been downloaded. This is important, becase VideoJS will only load http-streaming module (HLS) after the main manifest finished downloading.
  • player.on("loadedmatadata", (e) => {})is too late because it gets triggered after the selected quality manifest has been loaded and right after that the first key might get loaded instatly based on your settings (poster, preload etc).
  • player.on("loadstart") is being triggered after http-streaming module is loaded therefore the XHR object will be available trough player.tech().hls property.

Conclusion

Choosing the unknown

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Fundamentals: Data Types

Understanding JavaScript Data Types

An Intro to MERN

Develop & test React components in isolation

Occam’s Razor: Keeping the Code Short and Simple

Javascript Jetpack day 2

Converting a String to an Integer without any in-built methods

Global, Local & block scope variables

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
József Koller

József Koller

Choosing the unknown

More from Medium

Analyze and Optimize Webpack Bundles Size and Contents

Testing a React Component Library package locally, using Yarn and Craco

React Component Libraries

I18n Lib(easiest way with sub-path routing ) in Next.js by Paras Manavdariya

Beekeeper - Saving bees, supporting beekeepers