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

Conclusion

--

--

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