Building an Online Video Platform for an Arts Organisation: [Part 1] Video Embedding

As a digital arts organization, Watershed is not short of digital content. It has alway been as an early adopter of “digital spaces” and our video archives contain a treasure trove of cultural content. Over the last decade Watershed has produced and curated a range of cultural video content across the Web such as short films and animations, recorded performances, talks and interviews.

However, adopting and managing this content in a progressive manner is hugely problematic:

  • Adopting emerging technologies means content often becomes entrenched by legacy burdens – as new trends emerge, old ways of doing things become obsolete. But we have to continue to support and archive this content.
  • As we continue to support emerging technologies the complexity of systems development increases exponentially. With limited resources, managing the background systems, which supports this content, becomes increasingly difficult.
  • The way people are consuming content has changed dramatically over the last few years. More and more people are watching videos on-demand – and expect a high quality experience – and more people are watching videos on tablets and mobile devices.
  • It’s now a given that content can be shared and distributed across the web, without limiting it to a certain site.

For a digital arts organization all this change can seem a bit bewildering because people’s expectations are increasing, but resources are not. How can one manage all these legacy burdens and continue to produce online content with limited resources? Is it actually possible?

Well, eighteen months ago, and in-between other organisational demands, Watershed’s ICT department began a process of solving this problem. And, over the next few posts in this series, we will be sharing with you the results of this work. This first post focuses on the task of Video Embedding, because Vimeo isn’t the only solution…

Developing a bespoke iFrame based Video Player

As we started looking at the problems of putting video content online we highlighted a few key problems:

  • How do we actually put video content online?
  • How do we manage video embedding different domains?
  • How do we manage video across devices?
  • How do we protect our video content?

There’s lots of ways to put video content online. The simplest is just to upload your videos to a service such as YouTube or Vimeo. Although this is cheap and simple, there are some inherent problems: you are no longer in complete control of your content, and there’s limited scope for editorializing and archiving your content along with its metadata. Plus, for us, there was no way we could have uploaded a decades worth of content to ‘the cloud’. Using a third party service was a resounding no-no.

Instead we were ambitious and decided build our own ‘iFrame based Video Embedder’, from scratch – mainly because we could. And you can see it in action below:

An iFrame based Video Embedder is simply a method of centralizing a media player through an iFrame. In other words, you store all your videos and support code (in this case your video player application) on one domain, and then serve up that content, across web sites, via an iFrame. There are loads of advantages to adopting this strategy:

  • Everything is managed from a single location: support code is uploaded/edited in place; theme changes are done from one place; analytics is controlled from one place; authorization is controlled from one place. This makes development and maintenance incredibly easy, because changes from this one location can be propagated to all of our videos instantly – no matter where they are on the web.
  • Sharing content is easy: This method also allows you to standardize the way you put content online. As such, we can now produce ‘video embed code’ snippets (in a similar fashion to YouTube or Vimeo) allowing us to easily embed a video on any website. This enables us to share our content with other people in the simplest way possible.
  • Cross Device support is manageable: As the iFrame embed method is ‘centralized’, rules of serving up content across different devices can be written in one place. Because of this we can use Javascript to detect what platform/device a client is using, and serve that content up accordingly. For example, iOS devices don’t support Flash, and our system can detect this and serve up video via HTML 5 instead. Furthermore, we also use pseudostreaming, so if a user is using a slow connection we can enable users to skip to latter parts of the video without having to wait for the whole stream to download first.
  • We have complete control over our content: Because our videos are now served up through the iFrame method we can tightly control how our videos are shared on the web. We cannot, for various reasons, allow all our videos to be freely shared. So we built an authorization system that allows us to control what sites our videos are embedded on. Again, because all our support code is hosted on one domain, being able to do this is relatively simple.

By adopting a bespoke method of embedding videos, using an iFrame method, we have been able to share our content in more manageable way. We are now using this method for all of our current and legacy videos, and it has allowed us to distribute our videos across hundreds of different websites. However, to make this all work nicely we metadata. Lots and lots of metadata. And this will be our problem for part two

Written by Richard Grafton

Richard is Senior Developer at Watershed, where he supports and develops Watershed’s digital presence and programmes. Before working at Watershed, Richard was a research technologist at BBC R&D, and the Media Technology Lab at the University of Sussex. He holds a BSc (Hons) in Multimedia and Digital Systems.