As technologies related to the production and delivery of digital motion media continue to advance, so do consumer demands for an increasingly varied and rich media viewing experience. High-definition video is now being delivered to more users, on a wider variety of devices, and through more complex networks than ever before. For content providers, this of course means more available avenues for media distribution and monetization.
Traditionally, video has been delivered to the client in one of two ways: either by progressive download using the widely-supported HTTP protocol, or by streaming, using protocols such as RTP, RTMP, UDP, or TCP, in conjunction with specialized server-side software to handle the stream (e.g., Flash Media Server or Windows Media Services). These two delivery methods had both advantages and disadvantages. Streaming media protocols offered the viewer a better experience by allowing the video to play back right away, without having to first wait for it to completely download. They also made possible such features as adaptive bitrate streaming to compensate for fluctuations in user bandwith, live viewing, content encryption, and smart scrubbing. These features often came at a significant cost, however, and as such weren’t a viable option for many content providers. Delivery over HTTP on the other hand, required a complete file download before viewing could start. In addition, content transferred in this way was stored on the end user’s hard drive, and was therefore often not the best solution for displaying copyright-protected content. However, support for the HTTP protocol was, and remains to be, very widespread. Specialized server technology isn’t required to deliver content over HTTP-a simple (and free) web server will do. Being supported by existing and widespread server hardware and caching infrastructures continues to be one of the major advantages of using the HTTP protocol.
In the past, content providers often faced a difficult dilemma. Should they make the relatively large financial investment in order to provide the best streaming video experiences to their end-users? Or would their ROI be better served by delivering a less-robust viewing experience, albeit to a potentially larger audience, over HTTP? Companies such as Move Networks, Microsoft, Adobe, and Apple have come up with their own unique solutions to this problem-the problem of dynamically streaming media over the HTTP protocol. Each solution involves breaking up the encoded media files into smaller chunks, which are then re-assembled by the media player on the client end.
A few adaptive bitrate streaming solutions:
- HTTP Dynamic Streaming – Adobe
- HTTP Live Streaming – Apple
- Smooth Streaming – Microsoft
- Adaptive Bitrate – Octoshape
HTTP Dynamic Streaming – Adobe
Since the release of Adobe Flash Player 10.1, and the Open Source Media Framework 1.0 (OSMF), content delivery providers, creators, and publishers have had the option of leveraging HTTP Dynamic Streaming to vastly increase their reach when it comes to delivering quality video experiences to the client. HTTP Dynamic Streaming (HDS) is a true streaming technology, but not dependent on specialized streaming servers or proprietary transfer protocols. In addition, the tools required to make your media files streamable over HTTP are provided free from Adobe.
To prepare your media for HDS, you do the following:
Package your FLV, F4V, or other MP4-compatible files using the free f4fpackager tool.
Download f4fpackager The f4fpackager is a command line tool available for Windows and Linux that you use to convert your source media files into the necessarily-fragmented files required for streaming. You can get the packager for free on its own, or use the version that ships within Flash Media Server 4.0 and up. The process is fairly simple and quick-much faster than encoding the source files to begin with! To run the packager in Windows, at the command line, “cd” into your Flash Media Server or Apache web server installation’s “tools\f4fpackager” folder. From here, easily run the packager by simply typing “f4″ (then Tab), and let the command window auto-complete your prompt to launch f4fpackager.exe. Give the packager at least the following arguments:
Alternatively, you can omit the output argument, and the packager will place the packaged files into the source directory. More packager arguments for doing things like declaring a file’s bitrate, encrypting, etc. can be found here.
If everything goes well, you should have 3 new files for every source file you sent to the packager:
- .F4M (manifest) file
- .F4F (fragment) file
- .F4x (index) file
The manifest file (.F4M) is an XML file that contains pertinent information about your media that the media player parses in order to play back the file appropriately. To learn more about the .F4M, and .F4F file types, please check out John Crosby’s series on HTTP Dynamic Streaming.
Ensure that you have the HTTP Origin Module ready to go.
Install and configure the HTTP Origin Module into an existing Apache web server installation. The HTTP Origin Module is an extension to the Apache web server that is necessary for streaming media via HTTP to the Flash Player. You can download the module here. Alternatively, both the HTTP Origin Module and the Apache web server come bundled and configured with Flash Media Server versions 4.0 and up. *Note* Make sure your Apache server is running. On Windows, by default, the Apache web service start configuration within Flash Media Server 4 is set to “manual”. You may want to switch this to “automatic”.
Place your packaged media files into the vod folder of your Apache web server. (webroot/vod/).
Once you have your files properly packaged, and you’ve installed and configured your Apache web server, as well as the HTTP Origin Module (as a standalone or bundled within Flash Media Server), all you need to do on the server side is place the 3 packaged files into the vod folder within your Apache server, and grab the URL(s) of the media file(s) you wish to stream. *note* Apache is set to listen to port 80 by default, and to switch over to port 8134 if port 80 is in use. However, you may configure your Apache server to listen to any available port.
Configure your media player to point to the URL of the media within your vod directory.
You’re welcome to build your own custom player to stream via HTTP, however, the fine people at Adobe and Realeyes Media have already done a lot of the work for you. Give any or all of the following example players a try:
REOPS Player A powerful, OSMF-based media player from Realeyes Media The Realeyes OSMF Player Sample (REOPS) offers an excellent base for creating a robust video player utilizing the Open Source Media Framework (OSMF) from Adobe. REOPS is meant to be a building block for developers as well as a visual representation to illustrate the capabilities and how to of the OSMF framework. The REOPS project includes a very extensible and robust control bar skinning solution and templates to help customize the control bar, as well as Full-screen support, Closed Captioning from an external file, and OSMF dynamic plugin support. The REOPS project can be used to deploy easily customized video players that support progressive video playback, video on demand streaming, live streaming and dynamic streaming. What is more, all of these features are configurable from an external XML file.
Flash Media Playback A free, standard media player for the Adobe Flash Platform Flash Media Playback can be used by any website with only a few lines of HTML, enabling playback of video and other media in minutes. Its extensible plug-in architecture enables easy integration with content delivery networks (CDNs) and advertising platforms, as well as support for analytics and additional third-party services. With support for the latest delivery methods, Flash Media Playback enables web developers of all levels to fully utilize the powerful video features of the Flash Platform.
Strobe Media Playback A free, OSMF-based media player from Adobe Strobe Media Playback is an Open Source Media Framework (OSMF) based media player that you can quickly and easily integrate into your website. The compiled SWF and its source code are available for free download here.
…Or Build Your Own With These Tutorials! Mastering OSMF-Adobe Developer Connection Series John Crosby and David Hassoun of Realeyes Media have written an excellent series of articles and walkthrough tutorials for teaching us how to work with OSMF. They start with building a simple media player, and then dive deeper into more complex topics such as separating control, incorporating media overlays, as well as integrating and developing custom plugins.
Whether you decide to build your own, or use a media player that’s been provided, you’ll need to point your application to the .F4M file within your Apache server’s vod directory. Again, this is the media manifest file, an XML file that the media player uses to parse important information about the media, such as bitrate, duration, etc..
HTTP Dynamic Streaming requires Flash Player 10.1 and above. Any version of OSMF, starting with 1.0, will be capable of HDS.
Below is an example of the embedded Flash Media Playback media player delivering a video over HTTP. If you’d like, you can configure your own player here. If you would like to use the same packaged files playing in the demo, you can download them here. Of course, this demonstration is merely showing a video stream via HTTP-it’s not an example of the more powerful features available with HDS, such as variable bitrate switching, encryption, or late-binding audio. Stay tuned for coverage of those topics and more.
Where to go from here
For an informative look into the world of OSMF, including deep-dives into such things as building custom media players and plugin integration and development, please see David Hassoun and John Crosby’s article series “Mastering OSMF“on the Adobe Developer Connection site .
For information on how Realeyes Media can help you make the switch to HTTP Dynamic Streaming, please feel free to contact us today.
Scott Sheridan writes about, and messes around with, the latest technologies in digital motion media at Realeyes. He also does triathlons. Really big triathlons.
Feel free to reach out with any questions-we’re glad to help!
scott AT realeyes DOT com
By: Nils Thingvall
Recently I’ve been on the hunt for a means to bypass the aggregate timelines of SerialElements in OSMF. I want to do preroll and postroll ads that don’t add to the timeline of the main element I’m playing. After asking around in the Adobe forums, I was pointed to the AdvertisementPlugin, which is explained in this post on the OSMF blog. After playing around with it, this looks like just what I needed.
I work with the REOPS framework, so I went ahead and integrated it in. I have the code below, but first a word on what I had to do. There are some limitations to how REOPS currently can take in Plugin metadata, so I ended up doing a little trickery in the config XML for the plugin:
There are three types of metadata for this plug-in. The first are the components, the MediaContainer and the MediaPlayer. Those are handled in the application class below. In the config, I’m handling the other two types: files and times. The files are fairly straightforward, but due to REOPS handling of plug-in metadata, I had to cast them as OSMF URLs using the org.osmf.utils.URL class. I can then pull the URL out in the application class. The times I didn’t want to handle as URLs, so I fudged it a bit and just made the keys the number of seconds to wait before displaying a midroll ad.
The reason for this is that the Advertisement Plugin is expecting its metadata as a simple string or number, but REOPS casts metadata as Metadata objects. So in the app file, I extracted the data from the plugin’s metadata and reapplied it in the format it was expecting. In addition to that, the plugin metadata needs to hold references to the MediaPlayer and MediaContainer. Since REOPS dynamically creates its media elements and plugins, I had to hijack that process a little and pass in the two components before the plugin was loaded. I also had to change the start up order for REOPS around a bit, because it loads its plugins before it creates the MediaPlayer and MediaContainer it uses. I called the initMediaPlayer method early and blocked later calls to it. Unfortunately this breaks the authorized domain functionality in REOPS, but for this proof of concept I didn’t feel the need to circumvent that.
Once the plug-in was integrated, it simply was a matter of knowing when to hide the controls for the player. The plugin works by running two media players, and swapping the media element in the media container for the ad and then swapping back. By listening for the LayoutTargetEvent.ADD_CHILD_AT event, I could check to see if the media element that was added was my main media element. If it was, I would make the skin visible. If it wasn’t, I would make the skin invisible. That seemed to do the trick. I’m rather pleased to find this plugin, as it does something many people want and makes an otherwise difficult task much easier.
Here’s my application class:
In a previous post, we introduced you to the Open Source Media Framework (OSMF) created by Adobe, Akamai, et. al., which is a new, optimized media delivery platform based on the Open Video Player project. Born from a desire to create a common platform for media playback, advertising, customizable branding experiences, analytics, etc., OSMF is a Flash-based solution that addresses the many challenges of bringing media content to the web.
Developers can benefit from OSMF’s free and open-source code base by leveraging its pre-built, based on best practices components to quickly build their media delivery solution. An important advantage for the developer using OSMF is that they can spend less time creating the player itself, and more time perfecting the user experience by taking advantage of customizable skinning, plug-in implementation, etc.
Those interested in creating their own custom media players built with OSMF should consider the following two projects:
The RealEyes OSMF Player Sample(REOPS)
RealEyes Media has developed a sample player based on OSMF with a very extensible control bar skinning solution, full screen support, Closed Captioning from an external file, and OSMF dynamic plugin support. REOPS can be used to develop media players that support progressive video playback, video on demand streaming, as well as live and dynamic streaming. Read More
Strobe Media Playback
Strobe Media Playback is an OSMF-based media player available free as a compiled SWF along with source code. Strobe Media Playback, like OSMF, supports progressive download, RTMP and live streaming, HTTP dynamic streaming, as well as content protection with Adobe® Flash® Access™ 2.0. Read More
For those interested in a quick, easy-to-use solution for including media assets in their blog, website, etc. should consider using Flash Media Playback.
Flash Media Playback
Flash Media Playback is a free media player from Adobe based on OSMF. This player, unlike REOPS and Strobe Media Playback, is hosted on Adobe’s servers. Simply provide the player with the location of your media asset, assuming it’s on a web server, and Flash Media Playback will take care of the rest.
Configuration of the Flash Media Playback component can be achieved easily by utilizing the Flash Media Playback Setup configuration site. This site will automatically generate HTML code based on the parameters you choose to edit, which can then be pasted into your web page. The only two parameters that you must provide are your media asset’s URL, and the dimensions of the media player (default size is 470 X 320). Read More
Flash Media Playback example
This video player was easily added to the page by simply pasting in the generated HTML code from the Flash Media Playback Setup page.
OSMF provides developers and content providers alike with exiting new opportunities for delivering their media content to the web. In future installments, we will explore more of the features and possibilities available to you from the Open Source Media Framework.