FIFA – find someone who hasn’t heard of it. But, in case that’s you, the International Federation of Association Football is perhaps the most prestigious sporting body in the world, responsible for bringing over 200 national football associations together. It sets the world stage for nations to compete with one another, much to the planet’s five billion football fans’ delight.

The number of games played under FIFA are, frankly, unimaginable but, in World Cups alone, there have been close to 1,000 games played since 1930 – or approximately 86,000 minutes, excluding extra time, interviews, punditry and pre/post-match. Why is this important? When FIFA needed to make access to its international archive of footage easier and, more importantly, the selling of rights to this footage simpler, it needed a partner that could wade into the underbelly of its archive and organise it for everyone to see.

How? On the backend, the archive uses a video asset management system run by EVS – it asked us to build a custom web application that would sit over the top, making it accessible to broadcasters, journalists and clubs.

Talking tactics

As a creative engineering company, we’ve developed a deep understanding of MAM (Media Asset Management) systems with projects for the likes of UEFA and NEP. It’s this expertise that brought FIFA to our doors, and the reason we were able to confidently feed into and help FIFA capture their requirements, whilst quoting for the delivery of the web app. We pulled together custom UX, design and functionality for the app, planning in a full roadmap and set of timelines that would bring the project to fruition to hit FIFA’s exact needs.

 

The MAM interface we built is a single page web application that gives users the functionality to manage photos, videos and documents interactively. To do this, we used Angular.js to take the complex parts of the system and make them flexible and dynamic. We used Javascript to pack it with interactive features, whilst bringing its design, styling and colour to life with HTML5 and LESS Stylesheets.

Unpicking minute-by-minute

The project wasn’t without its challenges. To kick-off, we had to find a way for users to directly search and access content without creating new ones. To do this, we bypassed the ProjectID on every asset, creating fake EVS ProjectIDs in the background and managing the clean-up. We also had to future-proof the media player and give it basic editing functionality so journalists or broadcasters could mark ‘in’ and ‘out’ points. But every match is split into chunks too – from the first half through to post-match interviews – and so the player needed to work across segments, not just entire matches.

The default EVS encoding profile is also tricky when playing low-res or proxy files and isn’t set-up for HTML5 playback. It means when you ‘scrub’ a video, the experience is poor, jolted and frustrating. So we used an encoding profile, web server and delivery setting we’d already researched and developed for this exact problem at UEFA, which optimised playback and made scrubbing so responsive we could use hardware jog shuttles to control it.

The final whistle

Whilst the quotable statistics are not released by FIFA, the project result hit the back of the net. We’d taken a complex backend system and placed a user-friendly, uncomplicated interface over the top – despite the inner-workings of the project being technically complex that required a significant level of detailed analysis and build.

Far from an own goal, FIFA was extremely happy with the result, engaging us to help with the provision of enhancements, general maintenance and support. Strike!