Prologue
“And why would I want to do THAT?” This is probably the first question that comes to your mind reading the title of this post: after all streaming videos is a very dire task, filled with perils and bandwidth costs. That sounds especially true when you can freely use youtube, vimeo, facebook or whatever other service is eager to capitalize on your content to generate traffic: why pay for bandwidth when you can just upload your content to one of those services and just embed a video player on your website with a little javascript?
Actually there might be cases in which you don’t feel comfortable with this course of action, and the reasons might be many:
- you don’t like ads on your video that will create profits for somebody else
- facebook/youtube/vimeo won’t accept your video because they think your soundtrack is copyrighted by somebody else
- you don’t like to give up rights on your content thanks to policies that might change anytime in unfavorable ways
- you and only you want to decide exactly quality, video resolution, formats and codecs used
- you just like to do things by yourself
In this series of articles we’ll get into the details of creating your own video streaming infrastructure, we’ll see how to create videos, edit them, add a soundtrack, convert formats to each other, tune bandwidth needs, stream your video letting users randomly positioning themselves at any point, create video icons with animated gifs, and much more.
The tools needed
All the procedures described on this series of articles have been developed and tested on Linux, precisely Fedora Linux. All the tools described are open source and are generally available on other Linux distributions, or under Windows and OS/X, but I will only refer to Linux. Make sure you have the following packages:
Openshot or KDEnlive ((on Windows or OS/X you can use, respectively, Movie Maker or iMovie)
Creating your own videos
There are different sources form you you can create your own videos. It could be your digital camera, your GoPro Hero action cam, or just photos from your last vacation that you want to put in a video slide-show, adding a soundtrack. Software like Open Shot or KDEnlive make this process really easy and fun. It is out of the scope of this article to describe in details how to use non linear video editors, but you can easily find plenty of tutorials online.
Codecs, formats, browsers
The first thing that you must know about setting up your own streaming infrastructure is that there is a lot of variety to take care of. Until recently there was only one clear solution (the same adopted in fact by youtube from the very beginning): Adobe’s FLV video format, handled natively by the ubiquitous flash player. But in the post-flash world we live in, that solution is not the only one anymore, nor the best or the more future-proof: enter in fact HTML5 and the new <video> tag. All modern browsers (and even Internet Explorer, since version 8) support it, allowing us to embed a video in a page in the same way the <img> tag does. This is wonderful news, except that this started a very predictable format war. The contenders are the heavily patent encumbered mp4 (based on the H26x codec), pushed by Microsoft and Apple, and Theora backed by Firefox and Chrome. In 2010 Google announced the general availability of a new video format, called webm and based on the VP8 codec. Google promised full access to the VP8 codec (now VP9), freeing it from patents and releasing the libvpx library to manage it under a liberal open source license. Firefox and Opera added support for webm, while Google released a plugin for Internet Explorer 9+ and promised one for Safari.
All the browsers that support the flash player can of course use the flv video format, so this rules out iOS and Android, who never supported, or don’t support anymore, the flash player.
The format war has no clear winner yet. The W3C is going through intense lobbying and pressure to approve H264 as a standard, while the other field is pretty vocal about the necessity of keeping web video formats free from patents and royalties. While in doubt, the W3C decided to not take any decisions and left the “codec” chapter blank, inducing everybody to battle each other on mere number of users hoping to get a “de facto” standard approval by the web community. Things have recently grown even more complicated by the proposal of introducing DRM in the video formats, proposal that caused more polarization and controversy. To complete the picture, google announced recently the new VP9 codec, which promises to keep quality at the same levels while halving the bandwidth usage, while Cisco released a royalty-free H264 plugin that is now included in Firefox to handle mp4 content.
The compatibility chart is quite intricate, you can refer to this article from the Mozilla Foundation for a comprehensive summarization.
The HTML5 <video> tag
So, since not all browsers support all formats, how is it possible to provide a smooth user experience to everybody? Luckily the video tag can use multiple sources, and lets the browser decide what format is better. With a few lines like
<video poster="cover.jpg" controls="controls" width="320" height="240"> <source src="myfootage.mp4" type="video/mp4"> <source src="myfootage.webm" type="video/webm"> Sorry, your browser does not support the HTML5 video format. </video>
you can effectively support all the browsers, provided that the mp4 files is encoded with H264 in a compatible way.
In the next article we will see how to encode a video in mp4 and webm formats that should guarantee compatibility across a number of devices and operative systems.