HTML5 Video: Transcoding with Node.js and AWS

I recently worked on a video project, and I had a chance to use the relatively new AWS Elastic Transcoder with Node.js.  Along the way, I learned a lot about video on the web, and I thought I’d share some of my experiences.

Current State of Video on the Web

The current state of video on the web is a bit confusing, so here goes my best explanation of it.

Before HTML5, the most prominent technology used for video on the Web was Flash. However, because Flash is a proprietary technology, the Web community decided that an open standard was needed.  Thus the <video> tag was born.

The good news is that most browser support the <video> tag.  Unfortunately, that is where a lot of the cross compatibility stops.

Every video file has a specific video container format that describes how the images, sound, subtitles etc. are laid out in the video file.  There are currently three popular video container formats on the Web:

  • mp4
  • webm
  • ogg

Because video files are so enormous they are almost always compressed.  The compression algorithm used is called a video codec.  These are the most popular video codecs being used on the Web:

  • vp8
  • h.264
  • theora

I found this nifty image from here, that helps show the video file layout:

The problem is that there is no standard video container/codec for the web due to disputes over licensing issues, and therefore you have to transcode videos into multiple formats.  Fortunately, it seems that you can get pretty widespread browser support with just two codecs/container combinations, mp4/h.264 and webm/vp8.

Transcoding with AWS and Node.js

In May of this year, Amazon released an official SDK for Node.js. It’s a superbly written library that has code for almost all of the AWS services.

Also earlier this year, Amazon released Elastic Transcoder.  Elastic Transcoder is a pretty slick service that allows you to transcode videos from just about any fomat into one of the standard web video formats above.

The Elastic Transcoder retrieves and processes videos to and from Amazon S3.  The architecture looks like this:

Node.js is a great platform to build a standalone video processing server that manages resources between S3 and Elastic Transcoder.  Node’s streaming capabilities and non-blocking nature make it a perfect fit for chunking video files to S3 and managing video transcoding.

Here’s a snippet of Node.js code that shows how easy it can be to create a transcoding job with Elastic Transcoder:

elastictranscoder.createJob({ 
  PipelineId: pipelineId, // specifies output/input buckets in S3 
  OutputKeyPrefix: '/videos' 
  Input: { 
    Key: 'my-new-video', 
    FrameRate: 'auto', 
    Resolution: 'auto', 
    AspectRatio: 'auto', 
    Interlaced: 'auto', 
    Container: 'auto' }, 
  Output: { 
    Key: 'my-transcoded-video.mp4', 
    ThumbnailPattern: 'thumbs-{count}', 
    PresetId: presetId, // specifies the output video format
    Rotate: 'auto' } 
  }, 
}, function(error, data) { 
    // handle callback 
});

Video.js: The Open Source HTML5 Video Player

Unfortunately, the HTML5 video tag only gets you about half the way there.  There are a lot of missing features between different browsers.  Luckily the guys at Brightcove wrote video.js.  Which is an awesome library that helps provide cross browser HTML5 video support with fallback support to Flash.

Here is a snippet that shows how things are tied together on the frontend with video.js:

<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>

<video id="example_video" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  data-setup='{"example_option":true}'>
 <source src="//video.techpines.com/cats.mp4" type='video/mp4' />
 <source src="//video.techpines.com/cats.webm" type='video/webm' />
</video>

I hope that helps with anyone looking to understand video on the Web.

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Brad Carleton

Brad is a rockin' fun JavaScript coder who enjoys building cool stuff and long walks on the beach. As the Founder/CTO at TechPines, he has worked with large companies and startups to build cutting-edge applications based on HTML5 and Node.js. He is the creator of Bone.io, a realtime HTML5 framework, and is the author of Embracing Disruption: A Cloud Revolution Manifesto.
This entry was posted in aws, html5, node.js, video. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Matt McClure

    Great post, and thanks for the Video.js love!

    We (Brightcove) also provide a transcoding service called Zencoder. I work on the Node integration library (https://github.com/zencoder/zencoder-node), so if you get a chance to try it out I’d love your feedback.

  • santihbc

    Great post! Very informative and it comes at the right time for me. Definitely a bookmark for me

  • santihbc

    Which presets for the transcoding pipelines did you use?

  • http://netaction.de/ Thomas Schmidt

    You are mixing codecs and formats. MP3 is a good example for a format as there are lots of MP3 codecs.

    • techpines

      Right, the files have a certain format, and in the case of MP3 there can be more than one algorithm for encoding/decoding.

      It can all get pretty technical and nuanced, so I was trying to give a slightly simplified overview.

  • Chinar Regundwar

    Hi,
    I wanna know what exactly HLS, HDS and MPEG-DASH are and where do they come into picture.
    Also I see that AWS supports HLS so how do i make it support for HDS and MPEG-DASH

  • 75lb

    sounds cool.. or you could do your own transcoding (without AWS) using handbrake-js https://github.com/75lb/handbrake-js