RealEyes Media, VideoPress & OSMF

Posted on August 19, 2010 at 12:39 pm in Development, Media Solutions

The VideoPress media player – built using OSMF & REOPS

When VideoPress decided to rebuild their media player, they chose to do it using the Open Source Media Framework (OSMF). By leveraging the work done by Realeyes Media with the REOPS project, the VideoPress media player provides a robust media playback control that can be easily implemented. In addition to the built-in features of the player – media control, sharing etc – extending the functionality of the player using the OSMF plug-in architecture allows for partner integrations such as stats and CDN integration as well as additional functionality from other plug-in providers.

What is OSMF?

Open Source Media Framework (OSMF) simplifies the development of media players by allowing developers to assemble components to create high-quality, full-featured video playback experiences. This open framework enables development focused on web-based video monetization, with lower costs and faster turnaround.

What is REOPS?

Like OSMF, REOPS is open source and available for developers to create their own custom players on top of it. With REOPS, even those without developer experience can customize skins and functionality using the several premade skin templates and the system’s XML configuration file.

Why REOPS for VideoPress?

The VideoPress media player needed to be a flexible and robust player that provides user customization and the ability to easily manage the media displayed on one’s site. REOPS leverages OSMF to provide ease of configuration for media, look and feel as well as extensibility to the VideoPress media player through the OSMF plug-in architecture.

Configuration

Everything from the media being played to the skin of the player is controlled at runtime via an XML or AMF configuration object. This configuration object allows the player to be configured each time it loads meaning different media, even a different look and feel can be presented based on the configuration provided at load time.

Media Definition

The configuration object begins by defining the media to be played back. As an example the following XML snippet defines a progressive video to be played back.


<mediaElement>
    <media url="http://www.server.com/video/MyVideo.flv" />
</mediaElement>

This configuration snippet adheres to the Flash Media Manifest (F4M) format and allows for explicit definition of media types (live streams, dynamic streams for switching etc) to be provided to the player. To learn more about the additional configuration settings you can continue reading the Building and Configuration Adobe Developer Connection article.

Skinning

An important feature of the VideoPress media player was customization of the player skin. For example, a sports team site can allow for the customization of the player colors to match their team colors. REOPS provides the ability to completely re-skin a player. The skin is created using a Flash template file. The assets in the template file can be change to reflect the new look and feel. A SWF file is created and new skin (SWF file) can then be applied via the configuration object. Below are 3 examples of control bar skins that can be applied to a player via the configuration object:



This flexibility allows the VideoPress media player to be customized via a player skin. Details on creating a skin for the REOPS player can be found at the Adobe Developer Center in the Skinning and Control bar REOPS article and in this article written by Juan Sanchez.

Configuring skins in the REOPS player is as simple as specifying the correct skin SWF file in the configuration object. An XML example of this would be:


<skin path="assets/skins/RE_Skin.swf">
    <skinElement id="controlBar"
        elementClass="com.realeyes.osmfplayer.controls.ControlBar"
        initMethod="initControlBarInstance"
        scaleMode="NONE"
        hAdjust="0" vAdjust="0"
        vAlign="BOTTOM"
        autoPosition="true"
        draggable="true"
        autoHide="true" />
</skin>

The skin configuration allows one to specify additional features of the skin using the sub node <skinElement>. In the above example we are configuring a custom control bar that will provide the main media control for the player.

Plug-ins

In addition to the built in features of the VideoPress player, the configuration object allows for the loading of OSMF plug-ins. The OSMF plug-in architecture allows for developers and partners to create plug-ins that unobtrusively enhance and extend the functionality of a media player.

The VideoPress player includes a built-in Closed Captioning plug-in that was provided with the OSMF framework as well as additional custom plug-ins built to enhance the base functionality of the player. Other plug-ins could include analytics tracking, functionality enhancements or restrictions as well as advertising and playlist control. The flexibility of the OSMF plug-in architecture allows for an endless possibility of plug-in development. The osmf.org site has more information about OSMF partners who are actively developing plug-ins.

As an example of configuring additional plug-ins for the REOPS player, this XML snippet tells the player to load a simple plug-in that overlays a watermark image over the media that is being played:


<plug-in path="http://www.realeyes.com/SampleBugPlug-in.swf">
    <metaData namespace="http://www.realeyes.com/watermark">
        <value key="watermarkURL">
            <id>http://www.realeyes.com/watermark.png</id>
        </value>
    </metaData>
</plug-in>

In the above sample, the <plug-in> node tells the REOPS player where to load the plug-ins from. This example also includes a metadata definition that REOPS uses to pass the location of the watermark image to the plug-in so the plug-in knows what image to display over the media.

Summary

The Open Source Media Framework and REOPS were identified by VideoPress as 2 tools that would lead to a best of class media player that provided them with the features and functionality at a level needed by their users and clients. With the flexibility provided by OSMF and configuration flexibility provided by REOPS, the VideoPress media player allows for the ease of deployment and feature rich implementations that were required to be developed quickly and easily.

Another important item to note is the open source nature of the VideoPress project. Each component on its own has been released under an open source license for the community to use and improve upon.

John Crosby (72 Posts)

John is a partner at Realeyes Media and has had his fingers in many projects and technologies from Realeyes’ beginning. John has created training curriculum for the Flash Platform and surrounding technologies as well as researched and implemented new processes and tools for management and development teams. Problem solving and providing solutions is where John excels. Aside from the courseware, development and consulting, John has published multiple articles and papers and continues to do so at his blog and on Adobe’s Developer Connection. As a former professional foodie turned keyboard jockey, John spends his time away from the internet as a father, husband, vinophile & productivity monk. Regardless of the subject, John is always on the lookout for tools, ideas and people that make food, code, business – whatever it is – more fun.


Tagged with , , ,

* Required


Comments

  1. M Waters 23 June 2011 at 10:42 am permalink

    So the Videopress player is a Flash player and so not visible on iPhones/iPads and other non-flash devices/platforms?

  2. ssheridan 23 June 2011 at 3:54 pm permalink

    VideoPress chose to leverage the powerful features within the Flash platform for their player, but, as of March 2011, they also offer a version built in HTML 5. Users should be able to view VideoPress videos on virtually any device, including those running iOS. http://videopress.com/2011/03/09/videopress-html5-video/