Build Your Video Business

Building an SVOD Network From Scratch with the VHX API

by Scott Robertson · May 23, 2016 · Comments

In February we launched our public API, which makes it easy for small teams with developer resources to build out their own fully-custom subscription video networks. Building a custom SVOD with our API means you have total control over the design, can use your language of choice, can handle payments how you see fit (we recommend Stripe), and can host your application wherever you’d like. We handle all the complications related to video delivery and entitlements, giving you control of who and how viewers watch your content.

Our goal is to make the API as simple as possible — simple enough that integrating our video services into your site would really only require five steps. You can do more with the API, but these are the essentials for getting things up and running. Developers: Lets dive in!

Create a Video

Once you’ve created a VHX account, you’ll need to upload your videos via your VHX Admin. We will automatically transcode your files into various renditions for streaming across devices on the VHX player. You will later reference your video when making API calls to authorize customers for that video.

Create a Product

Once you have your videos uploaded you'll need to package them for customers to watch. Content can be accessed by creating a product, which can also be created via the VHX Admin. For a custom SVOD network, create a subscription product and then add any videos you’ve uploaded to that product.

Create a Customer

In your application, after you’ve created a new user in your own database, you can use the VHX Customers API endpoint to create a VHX customer by providing a name, email, and the subscription (i.e. the product you're granting them access to).

$ curl -X POST "https://api.vhx.tv/customers" \
  -d name="First Last" \
  -d email="customer@email.com" \
  -d product="https://api.vhx.tv/products/1" \
  -u o3g_4jLU-rxHpc9rsoh3DHfpsq1L6oyM:

Authorize a Customer

Next in your application, you can grant access to a customer and a specific video by passing both to the VHX Authorizations API. This call will return a tokenized HTML5 Player (i.e. access will be limited for a period of time).

$ curl -X POST "https://api.vhx.tv/authorizations" \
  -d customer="https://api.vhx.tv/customers/1" \
  -d video="https://api.vhx.tv/videos/1" \
  -u o3g_4jLU-rxHpc9rsoh3DHfpsq1L6oyM:

Output the Authorized Player

The authorized instance of the HTML5 Player (loaded in an iframe) can then be included on your application page for your customers to watch. The example below demonstrates how you might output the API JSON response if using a template engine such as Handlebars or Mustache.

<iframe src="https://embed.vhx.tv/{{ authorization.player.path }}?autoplay=1&authorization={{ authorization.token }}" width="850" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<!-- or -->
{{ authorization.player.html }}
<!-- include the VHX Player API for custom interactions with the VHX Player.-->;
<script src="https://cdn.vhx.tv/assets/player.js"></script>

You can read more about setup, including specific code examples using our client libraries (Ruby, NodeJS, and PHP) in our API Overview, as well as our full API documentation, all over at dev.vhx.tv.

Wintergarten Example of SVOD Built with VHX API

To give developers a boilerplate for their own implementations, we built a demo site that covers these five steps as well as some other basic functionality that an SVOD network might want to have. Namely, an index page showing all your videos sorted by collection, a means to create and then authorize customers to your video collections, and a watch page for authorized customers to view purchased video content via the VHX player.

You can check it out over at www.wintergarten.io.

The site is written in NodeJS and its codebase is publicly available on Github. If NodeJS is your language of choice and you need a place to get started, feel free to fork it! We also have a boilerplate example in PHP, and for languages that don’t yet have client libraries you can always use our API directly by referencing our cURL documentation. In fact, all our apps (iOS, Android, Roku, and AppleTV) are powered by the same public API.

The site, called “Wintergarten,” is meant to reflect our appreciation for the early pioneers in filmmaking, being named after the first movie theater in history. The videos shown are all public domain and are a curated selection of some notable films from the early days of cinema that broke grounds in various aspects of filmmaking technique.

We hope the tools provided by VHX will continue to allow creators to share their videos to audiences around the world in this digital age, continuing the tradition of the first movie theater.

Got developer hands on your team? We’d love to work with developers who are launching video products! Dive into the docs over at dev.vhx.tv. If you're not looking for uber-customization, you can get your SVOD network started right now.