Amazon Prime Video Player Investigation
Today I had an hour of my free time to learn how Amazon Prime Video Player is working. I’ll show you my small investigation of what I found.
Where is the main script
Playing and pausing is the core functionality of the player. Therefore it’s easy to get where the main script is situated by doing the following:
- Pause the player
2. Find<video> tag in DevTools > Elements
3. You need DevTools > Console to mock standard play method having current video— $0.play = () => { debugger; }
4. Then you try to play video using player controls
5. Having Call Stack you can go to the file, which initiated a method play
6. You now know the main script name, which Amazon Prime pointed at the moment of the debugging to blob:https://www.amazon.com/1a511ffb-e998-43b9-be96-51b11a55ab37, you can see it in Sources > Page
What can you find interesting inside the script
Private properties
In comparison to Google and Closure Compiler, Amazon Player developers do NOT minify private properties, which is why everybody can read most of the script code without problem, even if you don’t have Source Maps.
State Machine
You can also find this.stateMachine, this means that all the states and transitions between them are declared inside, not all transitions are allowed though. Anyway it’s better for controlling, testing and debugging (at least better than having a lot of flags with names like isPlaying, isPause etc.)
Loading a bundle
If you reload the page several times, you can see that a bundle blob:https://www.amazon.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx has different names. It means there is a loader where you can find a way to load the script with different names. In DevTools > Network you can see Initiator and go from file to file:
ATVWebPlayer.js— https://js-assets.aiv-cdn.net/playback/web_player/ATVWebPlayer/1.0.200751.0/js/ATVWebPlayer.js:formattedWebLoader.js— https://js-assets.aiv-cdn.net/playback/web_player/WebLoader.js:formatted- Inlined script which is added with type
application/jsonand has an id —av-wconf-dv-web-player-cfg, which has a link to a loader
In WebLoader there is hardcoded AppLoaderConfig. After reloading several times I couldn’t find a difference. Looks like config of stable version of modules which are used for different purposes. The config looks like that:
A bundle which we had a look into was loaded from ATVWebPlayer.js as a string of 6MB size!!! The string is taken from IndexedDB. The object after completed transaction is the following:
From the given string we can create a Blob, create object url as a script:
And we come back to the script which code initiated play when we debugged it in the first section. The name of the module is ATVWebCascadesPlayer
