Video player in BBC

Developing video player in Yandex, I’m not always limited to what we do but also wondering what technologies and techniques are used in other companies. As I like England I investigated the player of BBC, well-known quite a big company. Unfortunately I haven’t used it before, but maybe this is why I’m going to tell you how it’s working.

Watch the content from non-UK

iPlayer is working only in the UK. After going to The Graham Norton Show you’ll see this:

VPN, incognito window or other simple hacks are just not working. Even in 2014 BBC configured Geolocation technology to manage online content rights.

How BBC identifies you

First of all, to understand how it’s working we need to find where country identification is placed.

If you go to HTML source, you’ll see inline script in it:

Let’s go through it to get a general idea of what is going on here:

1. First, user profile is initialised

2. Then many auxiliary functions are declared, skip them for now.

3. User API is declared in window.bbcuser, some of the functions use getUserInfo

4. getUserInfo checks if data is saved or not:

   • If saved, data is used from the closure
   • If fetch and CORS-requests are allowed, GET-request is initiated from the user profile (for bbc.co.uk it is https://www.bbc.co.uk/userinfo), after first time the response is cached. The response looks like:

     

   • Otherwise, there’s a fallback function which loads module orb/fig with _figManager.js. It uses microservice which is available on fig.js and returns a code which is executed later on. The most interest part here is a parameter uk — it equals 1 if the request has been sent from the UK, otherwise 0
   • If the request hasn’t been sent from the UK, watching is prohibited due to rights issues.
   • As I investigated iPlayer from Russia, it returned 0 and the content wasn’t available. The response was:

     

5. At the end of HTML there a script which calls isUKCombined, it uses API that I described above, saving my profile to a variable user:

6. Script with id='tvip-script-app-store' is inlined in HTML closer to the end of HTML and includes initial Redux state. You can find the flag isForeignRegion which is null by default

7. When app.bundle.js is loaded, componentDidMound checks that isUK is not 0. As it’s 0, it calls callback function onUserForeignRegion:

8. It updates store value of isForeignRegion:

9. It forces React.component with possible name ForeignRegionBanner to rerender (at least one prop was changed)

10. And finally you can see the warning message on the page