the FanFootage logo

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.

the old web-based video player

Project Brief

My job was to build a BackboneJS based player which could:

  • stream event footage from YouTube via the YouTube JavaScript API.
  • 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.

Project Context

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
FanFootage hosted it’s videos on YouTube and wanted to use it’s JavaScript API to handle streaming to their website. This brought on several restrictions including:

  1. 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.
  2. An inability to determine the total size of a video file. This made estimating load times difficult.
  3. 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.
  4. 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
Simultaneously playing multiple HD videos is taxing on both bandwidth and CPU. I wrote highly optimised JavaScript in order to ensure the player interface was as snappy as possible, especially when displaying large events with 450+ video angles.

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.

Results

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.

the new FanFootage player

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.