01 Dec 2010

Flash Player 10.2 Beta Released With GPU Acceleration Improvements

Yesterday (11/30/2010) Adobe announced the beta release of Flash Player 10.2 for Windows, Mac, and Linux. This update introduces some key enhancements in the area of video playback, including a new API known as Stage Video, that dramatically improves performance for HD content delivery, as well as an API that enables the use of native custom mouse cursors, and support for full screen playback while using multiple displays.

read more
Share this
27 Sep 2010

Announcing Google Analytics Plug-in For OSMF, The GTrack Plug-in

The GTrack plugin has been built as an example of an OSMF proxy plugin. The plugin is able to send page tracking and event tracking for an OSMF MediaElement. The GTrack plugin uses the gaforflash library to send tracking to google analytics.

Page tracking is per MediaElement. Basically when the MediaElement is loaded and begins to play the URL of the resource is sent as a pageView to Google Analytics. You can also configure the value that is sent by adding metadata to the URLResource for the MediaElement. An example of this can be found in the Configuration section.

Events are sent to Google Analytics based on an XML configuration. Each of the MediaElements main traits can be configured to send a tracking event.

The GTrack plugin determines which tracking should be sent and what values are sent to Google Analytics via XML configuration.

This node specifies the Google Account to associate the tracking with. You can specify multiple <account> nodes to send tracking to multiple accounts. The value for this node can be found in your Google Analytics account and should look similar to – ‘UA-1234567-1’.

Example:

        <account><![CDATA[UA-1782464-4]]></account>
        <account><![CDATA[UA-1782464-5]]></account>

The <url> node is the URL that was set as the profile URL to be tracked by Google Analytics.

Example:

        <url><![CDATA[http://osmf.realeyes.com]]></url>

The <event> node is what defines the tracking that will be sent to your Google Analytics account. The ‘name’ attribute of the node is the key that tells the GTrack plugin to send an event. So, the names much match exactly. There are multiple types of events that can be tracked:

Example:

        <event name="percentWatched" category="video" action="percentWatched">
                <marker percent="0" label="start" />
                <marker percent="25" label="25PercentView" />
                <marker percent="50" label="50PercentView" />
                <marker percent="75" label="75PercentView" />
        </event>

This configuration example will track the start, 25, 50 & 75 percent markers as the media item is played. The complete is tracked by the complete event see MediaElement Events below.

Example:

        <event name="timeWatched" category="video" action="timeWatched">
                <marker time="5" label="5sec" />
                <marker time="10" label="10sec" />
                <marker time="20" label="20sec" />
        </event>

This example will send tracking at 5, 10, & 20 seconds respectively

MediaElement events are based off of the MediaElement’s available Traits. If the MediaElement supports a specific trait and there is an event that can be associated with the trait tracking can be defined for it. Example:

        <event name="complete" category="video" action="complete" label="trackingTesting" value="1" />

This example will send tracking when the MediaElement has completed playing.

The <updateInterval> node defines the interval that the GTrack plugin checks the current time and position of the currently playing MediaElement to determine when to send the time and/or percentage based tracking.

The <debug> node is not currently used but is planned to be implemented as a custom logging & debugging feature.

The node attributes (except for the name attribute) correspond to the tracking values defined in the Google Analytics Tracking API for Event Tracking

  • category: String – The general event category (e.g. “Videos”).
  • action: String – The action for the event (e.g. “Play”).
  • label: String – An optional descriptor for the event.
  • value: Int – An optional value associated with the event. You can see your event values in the Overview, Categories, and Actions reports, where they are listed by event or aggregated across events, depending upon your report view.

Sample XML configuration:

<value key="reTrackConfig" type="class">
        <!-- Set your analytics account ID -->
        <account><![CDATA[UA-1782464-4]]></account>

        <!-- You can track to multiple analytics accounts by adding additional <account /> nodes -->
        <!-- <account><![CDATA[{ADDITIONAL_GA_ID}]]></account> -->

        <!-- Set the url that you registered with your GA account -->
        <url><![CDATA[http://osmf.realeyes.com]]></url>

        <!-- Set up the percent based tracking -->
        <event name="percentWatched" category="video" action="percentWatched">
                <marker percent="0" label="start" />
                <marker percent="25" label="view" />
                <marker percent="50" label="view" />
                <marker percent="75" label="view" />
        </event>

        <!-- Set up the event tracking for the completed event -->
        <event name="complete" category="video" action="complete" label="trackingTesting" value="1" />

        <!-- Set up the event tracking for the completed event -->
        <event name="pageView" />

        <!-- These are the other available events that can be tracked -->
        <!--
        <event name="autoSwitchChange" category="video" action="autoSwitchChange" />
        <event name="bufferingChange" category="video" action="bufferingChange" />
        <event name="bufferTimeChange" category="video" action="bufferTimeChange" />
        <event name="bytesTotalChange" category="video" action="bytesTotalChange" />
        <event name="canPauseChange" category="video" action="canPauseChange"  />
        <event name="displayObjectChange" category="video" action="displayObjectChange"  />
        <event name="durationChange" category="video" action="durationChange"  />
        <event name="loadStateChange" category="video" action="loadStateChange"  />
        <event name="mediaSizeChange" category="video" action="mediaSizeChange"  />
        <event name="mutedChange" category="video" action="mutedChange"  />
        <event name="numDynamicStreamsChange" category="video" action="numDynamicStreamsChange"  />
        <event name="panChange" category="video" action="panChange"  />
        <event name="playStateChange" category="video" action="playStateChange"  />
        <event name="seekingChange" category="video" action="seekingChange"  />
        <event name="switchingChange" category="video" action="switchingChange"  />
        <event name="traitAdd" category="video" action="traitAdd" />
        <event name="traitRemove" category="video" action="traitRemove"  />
        <event name="volumeChange" category="video" action="volumeChange" />
        <event name="recordingChange" category="dvr" action="recordingChange" />
        -->
        <!-- Time based tracking (in seconds)-->
        <!--                            
        <event name="timeWatched" category="video" action="timeWatched">
                <marker time="5" label="start" />
                <marker time="10" label="start" />
                <marker time="20" label="start" />
        </event>
        -->
        <debug><![CDATA[true]]></debug>
        <!-- How often you want the timer to check the current position of the media (milliseconds) -->
        <updateInterval><![CDATA[250]]></updateInterval>
</value>

  1. Add the <event> node to the XML configuration
  2.         <event name="complete" category="video" action="complete" label="trackingTesting" value="1" />
  3. Add a MetadataValue to the URLResource object for the MediaElement
  4.         var resource:URLResource = new URLResource( PROGRESSIVE_PATH );
            resource.addMetadataValue( GTRACK_NAMESPACE, {pageURL:"AnalyticsTestVideo"} );
  5. Create the MediaElement
  6.         var element:MediaElement = mediaFactory.createMediaElement( resource );

This will track the String ‘AnalyticsTestVideo’ instead of the URL of the media resource.

  1. Set up the player
  2.         protected function initPlayer():void
            {
                    mediaFactory = new DefaultMediaFactory();
                    player = new MediaPlayer();
                    container = new MediaContainer();                      
                    this.addChild( container );
                    loadPlugin( {PATH_TO_GTRACK_PLUGIN_SWF} );
            }
  3. Set up a loadPlugin() method.
  4. Create a URLResource that points to the GTrackPlugin.swf
  5.         var pluginResource:MediaResourceBase = new URLResource( {PATH_TO_GTRACK_PLUGIN_SWF} );
  6. Add the XML configuration to the pluginResource as a MetaData value – ‘gTrackPluginConfigXML’ is an XML variable
  7.         pluginResource.addMetadataValue( "http://realeyes.com/osmf/plugins/tracking/google", gTrackPluginConfigXML );
  8. Listen for the plugin load events
  9.         mediaFactory.addEventListener( MediaFactoryEvent.PLUGIN_LOAD, onPluginLoaded );
            mediaFactory.addEventListener( MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );
  10. Load the plugin
  11.         mediaFactory.loadPlugin( pluginResource );
  12. The loadPlugin() method should look something like:
  13.         private function loadPlugin( source:String ):void
            {
                    // Create the plugin resource
                    var pluginResource:MediaResourceBase = new URLResource( source );
    
                    // Add the configuration data as Metadata to the pluginResource
                    pluginResource.addMetadataValue( GTRACK_NAMESPACE, gTrackPluginConfigXML );
    
                    // Set up the plugin listeners
                    mediaFactory.addEventListener( MediaFactoryEvent.PLUGIN_LOAD, onPluginLoaded );
                    mediaFactory.addEventListener( MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );
    
                    // Load the plugin
                    mediaFactory.loadPlugin( pluginResource );
            }
  14. Once the plugin is loaded, remove the plugin listeners and load the media
  15.         protected function onPluginLoaded( event:MediaFactoryEvent ):void
            {
                    // Remove the plugin listeners
                    mediaFactory.removeEventListener( MediaFactoryEvent.PLUGIN_LOAD, onPluginLoaded );
                    mediaFactory.removeEventListener( MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );
    
                    // Create the media resource
                    var resource:URLResource = new URLResource( PROGRESSIVE_PATH );
    
                    // Set up the page tracking
                    resource.addMetadataValue( GTRACK_NAMESPACE, { pageURL:"AnalyticsTestVideo" } );
    
                    // Create & set the MediaElement
                    var element:MediaElement = mediaFactory.createMediaElement( resource );
                    player.media = element;
                    container.addMediaElement( element );
            }

http://code.google.com/p/reops/source/browse/#svn/trunk/plugins/tracking/google/GTrackPlugin

Contact RealEyes

For more information about OSMF plug-ins, or to inquire about custom plug-in development:

Share this
09 Sep 2010

Flash Media Server 4 Released

Adobe announced today that Flash Media Server 4 is now available for trial/purchase.  In its most basic form, Flash Media Server 4 (FMS 4), is an advanced media delivery solution for those looking to leverage the advantages of dynamically streamed video over progressive download.  However, the FMS 4 family is capable of much more than that.  Aside from the free Flash Media Development Server, which is used to develop new applications for Flash Media Interactive Server, as well as run very low-volume streaming applications, FMS 4 comes in Three flavors:

  • Flash Media Streaming Server
  • Flash Media Interactive Server
  • Flash Media Enterprise Server

All three versions offer new features from what were available in FMS 3.5, such as:

Full 64-bit support – Server resources improved by being supported on 64-bit processors. Able to be installed on a wider range of platforms. Now supports CENTOS 5.3, Red Hat Enterprise Linux 5.3, and Windows Server 2008.

Enhanced buffer performance – You can now take advantage of Flash Player 10.1’s ability to interactively access media held in the buffer, which allows for actions such as fast motion, slow motion, etc.

Live HTTP Dynamic Streaming – In addition to streaming content via RTMP/RTMPE, FMS 4 can now take advantage of the industry-standard HTTP protocol, and still enjoy the quality-of-service features provided by dynamic streaming. FMS 4 also allows for the addition of DRM protection with Flash Access 2.

Faster Switching with RTMP Dynamic Streaming – FMS 4 provides improved adaptive bitrate delivery, giving your end users seamless video playback regardless of their bandwith stability.

The Three Flavors of FMS 4

Flash Media Streaming Server 4

  • Designed as an affordable step up from progressive download video delivery.
  • Faster dynamic switching, HTTP dynamic streaming, and server-side Access C++ plug-ins to enable more secure communication with Adobe Flash Media Live Encoder 3.1.
  • $995

Flash Media Interactive Server 4

  • Takes advantage of new IP multicast to maximize network efficiencies.
  • Enhanced multi-user experiences, such as chat, VoIP, video overlays, server-side playlists, and server-side recording.
  • $4,500

Flash Media Enterprise Server 4

  • Utilizes the new RTMFP (Real Time Media Flow Protocol) to allow for peer-to-peer assisted networking.  Drastically increase network efficiencies by leveraging peer-to-peer communication without being routed through a server.
  • Take advantage of both IP multicast and Application multicast.
  • Call for pricing (303-862-8611)


With the release of FMS 4, the possibilities for creating interactive, seamless video delivery experiences have never been more promising. By taking advantage of the many features available from the Flash Media Server family, as well as from the production tools provided in the OSMF, Creative Suite, etc., media content providers are now in a great position to make exciting advances in the area of media content delivery.

  • For more information about the Flash Media Server family, or to inquire about purchasing options, please call 303-862-8611.
Share this
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
21 Jun 2010
21 Jun 2010
15 Jun 2010
05 Mar 2010
22 Feb 2010

© 2016 RealEyes Media, LLC. All rights reserved.