How to Build Online Video Players
As online video continues to increase in popularity, more and more developers and businesses struggle with questions on how they should build their online video applications. The variety of choices feels endless. Should you use an existing online video platform (OVP) provider or build your own? Which platforms will you be able to support? Which features do you need? These choices and many others can seem overwhelming, but with careful planning, you can determine your answers and execute your choices.
Understanding the Choices Available
Before going too far into the exploration, there are certain basic business rules that need to be understood. Do you need a streaming player, or is progressive download a better option?
PROGRESSIVE DOWNLOAD
Progressive download is one of the easier features to support. These days, all HTML5 browsers natively support progressive download as an option for any H.264-encoded content. When choosing this option, you should understand what progressive download actually entails.
Progressive download allows for a single video file to be downloaded to the client’s computer and played back as it is downloaded. It does not need to wait for the entire file to finish downloading before playback begins, but the features you can build into the player are extremely limited.
Adaptive bitrate (ABR) isn’t an option; progressive download only allows for one file to be played.
Seeking presents user experience problems on some platforms, as it pauses playback (buffering) until the file has been downloaded as far as the point to which the user is seeking. This isn’t an issue on platforms such as HTML5, which can use byte range requests, allowing seeking to happen nearly instantaneously.
Also, it becomes difficult to protect the content, since by the end of the video, the entire file is sitting in the user’s cache.
Ultimately, progressive download is a viable option for short-form video (usually described as videos less than 10 minutes in length, although the vast majority of short-form video is less than 2 minutes) that does not need to be protected. The reason for this is that a short video can often be downloaded quickly, which negates the seeking issues, and if the content does not require protection, the lack of content protection ceases to be an issue. Likewise, on videos only a few minutes in length, most modern internet connections will be able to download the content in its single bitrate, which mitigates the lack of ABR.
If the content is not short-form, or requires protection, you should consider a streaming option.
STREAMING VIDEO
The nature of streaming video is that individual pieces of the video are downloaded and played back, as opposed to progressive download, which downloads the entire file. The benefit of streaming is that before any segment of the video is downloaded, you can decide what bitrate the player should play, enabling ABR logic. Additionally, seeking becomes much easier with streamed content, as there is no requirement to download any skipped content, which allows for a much more responsive experience. If you start at the beginning, watch for 30 seconds, then seek an hour forward, the 59 minutes and 30 seconds you skipped do not need to be downloaded, so the player can continue nearly seamlessly from the new point the user requests.
The downside to building a streaming player is it is inherently more complex and therefore requires more time to build and more code to run. However, for longform content and content which requires protection, streaming is a requirement in nearly all cases.
PLATFORMS TO SUPPORT
Another common question is which platforms the content needs to play on. If you only need to support a desktop browser, that implies a significantly different level of complexity than if you need to support Android or iOS, set-top boxes, connected TVs, or gaming consoles.
Some of these platforms provide HTML5-compliant browsers, which make progressive download an option, however, that is not true for all or even most of them. It should be understood that if a streaming application is required across multiple platforms, it will, most likely, require writing (or implementing, if you are using an off-the-shelf OVP) several different codebases.
Off-the-Shelf Players
There are many worthwhile OVPs and players on the market today that you should consider. Among them are Brightcove’s Video.js, JWPlayer, Kaltura’s player, Ooyala’s player, thePlatform’s player, and Adobe’s Primetime player.
The available players, their licensing models, and the features they support will likely have changed between the time this article was written and when it was published. As you begin the process of building a video application, you should review all of the available options and determine if any of them are a good fit for your needs. If so, using an OVP is highly recommended. However, there are times when you’ll find that none of the off-the-shelf solutions are a good fit, either for feature or economic reasons. In those cases, building your own player becomes the best solution.
Choosing to Build
After doing your research, you might find that your specific requirements do not fit well with any of the existing OVP solutions. In that case, you will likely decide to build your own solution. First you will need to determine which platforms you want to support and which technologies you want to use.
DESKTOP SOLUTIONS
If you need to have your videos available for consumers to watch on their personal computers, you will need a desktop player. While there is a long and varied history of technologies supported on the desktop, today there are three primary platforms: Adobe Flash, Microsoft Silverlight, and HTML5.
Increasingly, companies are choosing to deploy a hybrid solution, which prioritizes one of the platforms and fails over to another in case the first platform is unavailable. For example, some choose to build their player to first attempt to play in HTML5, but if that is not available (for older browsers, as an example), they try in Flash.
The hybrid solution most commonly combines Flash and HTML5, as Silverlight is currently available on less than 60 percent of the desktops worldwide, while Adobe Flash is still installed in more than 90 percent of all desktops.
Using JavaScript, you can detect the capabilities of the browser and determine which platform is best for the user.
FLASH
To play video in Flash, you need an instance of the flash.media.Video class. This class can natively handle progressive downloaded video. With the addition of a streaming server, such as Adobe Media Server, or Wowza Streaming Engine, playback of streaming video is also possible.
To build a Flash video player, you will need a class similar to that shown in Figure 1.
To build a Flash video player, you will need a class similar to this.
In the constructor of this class, an instance of the NetConnection class is created and event listeners are added to the instance. The connect method connects the Flash player to a media server. In this case, it is called and passed null as an argument, indicating the file is being served from the local file system or from a web server and not from a media server. The NetConnection will fire a NET_ STATUS event when the connection is ready.
Related Articles
Steve Heffernan explains how to build a customized HTML5 player. Watch this for everything you need to know.
21 Sep 2012
Two young but seasoned HTML5 Video experts tell viewers why they should use HTML5 Video and guide them through the required code in this presentation.
03 Jun 2011
Companies and Suppliers Mentioned