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.
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