FanFootage are a Dublin based company who crowdsource videos of gigs and other events and display them on their website. The unique way their technology works permits them to provide an experience where events can be watched from multiple angles in high-definition.
In early 2013, they asked me to to replace the video player used on their website with a version which would provide an experience more in line with the quality of their video and audio assets.
My job was to build a BackboneJS based player which could:
- allow users to switch between multiple angles of the same event without interrupting playback.
- simultaneously play multiple synchronised angles of the same event.
- run entirely on the client in order to facilitate embedding the player in domains other than fanfootage.com.
- obtain business insight into which videos were being watched and for how long.
I was tasked with meeting multiple deadlines including:
- investor presentations,
- high-profile events the company was involved with (e.g a 65,000 attendance Bon Jovi gig in Hyde Park),
- a coincident rebranding of the entire FanFootage website.
Completing this project involved working closely with FanFootage’s CEO, CTO and operating staff. I also worked with a contracted designer in order to ensure that users were met with a consistent experience across the entire FanFootage website.
Technical Challenges and Solutions
The project encountered numerous technical challenges including dealing with the YouTube API and computational resource management.
Limitations of the YouTube API
- The YouTube API’s refusal to preload videos. This meant that I couldn’t prefetch video content in order facilitate faster switching between video angles.
- An inability to determine the total size of a video file. This made estimating load times difficult.
- Cross-browser compatibility issues. The player needed to work in all modern desktop browsers. It was prevented from working on mobile browsers due to browser based security limitations.
- Limitations on the minimum player size. YouTube prevented me from displaying videos at small resolutions. In order to get around this issue, I had to dynamically resize videos after creation.
Bandwidth and CPU limitations
We experimented with playing a separate audio track and syncing muted videos against it but found that it was to CPU intensive to be a viable solution.
FanFootage now have the best player experience available within the scope of the technical limitations imposed by the YouTube JS API. Users can watch events and switch between multiple viewpoints in a much smoother fashion than they could before this work was performed.
They have insight into which angles are being watched the most, how long each video is watched for and success percentages for loading videos from the YouTube API. This facilitates much better technical and content decisions in the future.