A Bespoke Training Video Platform

A different take on a VLE for football coaching

The Client

Edge of Play was established to support, guide and promote sports coaching around the world.

Edge of Play helps football coaches at any level by providing them with free training resources to help engage their teams.

Their vision is to build a global, inclusive, online community of coaches: learning, interacting and creating, together.

The Brief

Having used YouTube previously to host their videos, Edge of Play came to us with the need for their own bespoke video platform to host their training resources for football coaches across the globe.

The platform also had to:

– allow the user to stream good quality videos on any device
– include space for advertising for future sponsors
– be editable by an admin internally
– allow the user to create their own account and log in for a personalised experience

The Challenges

  • The biggest challenge of this project was to make sure users could stream the videos from mobile and tablet devices relying on mobile data.
  • Many coaches work outside, sometimes lacking signal and relying on costly mobile data. We had to make sure the pages and videos loaded quickly, streamed easily and were cost effective.
  • We also had to make sure all advertising space was responsive and looked presentable across multiple devices.

Our Solution

The solution that we built for Edge of Play was a bespoke video platform which looked and behaved like an easy-to-navigate website. For this project, our design team was involved, so it was important to also establish brand guidelines and styling early on in the process so that the website looked its best as well as behaved as it should.

The advantage of building a full website as well just the video platform aspect is that we could add other relevant content pages, e.g. about us, contact us… Content on the site, such as the text around the videos, can the be updated in the bespoke CMS.

The website is globally scalable to support Edge of Play’s future plans to reach a world-wide audience, and also has space for advertisements which has the potential to generate a revenue stream to support the product.

As the brief specified, the platform also offers users the chance to create their own account for a personalised experience, and so Edge of Play can keep those users updated with new resources and helpful materials.

Any video will automatically be transcoded into several different versions…

Finally, and possibly the most interesting part of this platform is that the administrator (staff at Edge of Play) is able to drop any video into an input folder on AWS and it will automatically be transcoded into several different versions. These different versions enable the video to be played in the most suitable format for the device and internet speed. This means, whatever device the user is using, and whether they are connected via broadband or mobile data, the user will see a good quality video without an excessive load time.

The Tech

For this build we used TypeScript and React – this combines the power and performance of React with the reliability and type-safety of TypeScript. For the back-end we used the latest version of PHP (7.2) with a Laravel framework. We used Amazon Web Service’s (AWS) Elastic Container Service (ECS) with Docker for provisioning and hosting. The benefits of these technologies are: we don’t have to maintain a server, deployments are reliable, the platform is automatically scalable, and global deployment is easy

To keep load times to a minimum (especially for users with potentially poor connections) we trimmed the code weight as much as possible (under 200kb) to keep the pages loading quickly.

For the transcoding feature of the CMS we used AWS Lambda in combination with Amazon’s Elastic Transcoding Service (ETS) which automatically generates different video formats for different platforms; meaning the end user is always shown the most appropriate version of the video for their situation, but the administrator does not have to worry about providing or configuring multiple video versions.

Ultimately, it would be possible for users to be able to use the entire application while no longer connected to the internet…

During this phase of the project (phase 1 – future phases to follow), we began preparing an API for future integrations. Using Swagger Docs and JSON schema, the documentation is already there, up to date with the code and ready for future phases of the website. The frontend uses a ServiceWorker to control the caching of assets so that, ultimately, it would be possible for users to be able to use the entire application (including re-watching videos) while no longer connected to the internet – such as when out on a football field.

Keep an eye on our case studies for future phases, with possible features including gamification, integrations, and offline support. If you would like to see the website in action, visit www.edgeofplay.com

Think we can help? Don’t be shy!

Want to Talk to Us?

If you have a project you would like us to take a look at, you can contact us through our contact form and someone will be in touch, or email contact@buildempire.co.uk.

Or, if you prefer, give us a call in the office on 0161 641 2434 for a chat.