27 Jul 2011

HTTP Dynamic Streaming – Part 1: An Introduction to Streaming Media

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.

read more
Share this
06 Jun 2011

OSMF 1.6-Sprint 5 is Here!

Today Adobe announced the release of the latest sprint for OSMF 1.6, and it includes some exciting new features in terms of how it can handle audio. The biggest new feature is support for multiple audio tracks for HTTP Dynamic Streaming. Known as “late-binding audio”, this methodology allows producers to present multiple audio-only tracks attached to a particular video to the end user. Consider, for example, the need to deliver videos in more than one language. Late-binding audio allows producers to include seperate audio tracks for each language, and then have the viewer choose the appropriate one based on their needs. The benefits to having multiple audio tracks associated with a single video file are savings in encoding time, as well as reduced storage requirements-much more efficient than having to encode and store several different versions of each video. OSMF also supports the ability to switch between audio tracks during playback, which allows even more flexibility in terms of what kind of user experiences are possible.

Currently late-binding audio is available for video-on-demand only, but Adobe promises live/linear support in their next drop.

Check out the original announcement here.

Share this
04 Apr 2011
04 Apr 2011
27 Aug 2010

Skinning the Flash Media Playback Component

Previously we introduced three media players built using the Open Source Media Framework (OSMF); the RealEyes OSMF Sample Player (REOPS), the Strobe Media Playback component, and the Flash Media Playback component.  All three of these players offer various degrees of customization, with REOPS and Strobe being the most flexible.  However, even though the Flash Media Playback component is a pre-built player hosted by Adobe, it still can be customized in several ways to fit your needs.  In this article we discuss what it takes to  skin the Flash Media Playback component with some custom bitmap images and an XML file that directs the player to those images.

Skinning the Player

First, you need to determine which elements of the player’s user interface you’d like to modify. As expected, certain visual elements in the player will have different appearances in different states-a play button, for example, will have  default, over, and down states, and you should consider this when creating your custom bitmap images.

Next, you’ll need to get the ID for the element that you wish to change. A comprehensive listing of the editable user interface elements along with their default sizes and descriptions can be found here. I’m choosing to modify the play button overlay, and the the IDs for this element and its states are as follows:

  • playButtonOverlayNormal
  • playButtonOverlayDown
  • playButtonOverlayOver

I’ve created my own custom bitmap images that I’m going to use to replace the default play button overlay for each of its states.  Images to be used must be saved as either JPEG, GIF, or PNG.

From here you can choose between two methods for telling your player where to look for the image files. You can set a FlashVar skin variable in your page’s HTML code that contains the path to the image, or you can use an XML configuration file. I chose the latter, and my XML looks like this:

<skin>
<element id = "playButtonOverlayNormal" src = "http://realeyes.com/assets/PlayNormal.png"/>
<element id = "playButtonOverlayOver" src = "http://realeyes.com/assets/Play_Over.png"/>
<element id = "playButtonOverlayDown" src = "http://realeyes.com/assets/Play_Down.png"/>
</skin>

From here I simply uploaded my XML file and the three custom bitmap images to a webserver and into the same directory.  I then used the Flash Media Playback’s setup configurator page to automatically generate HTML code that directs my player to use these new images. In the configurator’s “advanced” section, I entered the URL for the XML file I uploaded where it asks for the “skinning file location” (not where you would enter a “configuration file location”).  Clicking on preview at this point should show you the player with your new skin applied. I copied the HTML that the setup page generated for me, and pasted it into this page-that’s it!

Flash Media Playback Component With Custom Play Button Overlay Applied

Share this
20 Aug 2010

Three OSMF-Based Players: REOPS, Strobe Media Playback, and Flash Media Playback

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

An example of the RealEyes OSMF Player in action

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.

Share this

© 2017 RealEyes Media, LLC. All rights reserved.