clientsTag: clients
Digital-Tutors is a recognized leader in on-demand training for the motion graphics industry, partnering with leading design studios, software manufacturers, and educational institutions. To extend their platform of web and mobile video applications, Digital-Tutors worked with RealEyes Media to create a new version of their online training library that would allow users to download lessons and courses for offline viewing, while continuing to advance the features in their training platform: Digital-Tutors Vault.
Today, Digital-Tutors is releasing the second major release of Vault, coupled with a new Web application that brings Vault’s advanced user interface and much of its functionality to the browser. Curious about what all the fuss is about? Vault 1.6 includes enhanced group functionality and updates to Digital-Tutors’ streaming technology.
Digital-Tutors Vault provides digital visual artists at all experience levels the opportunity to stream training content while online and use a credits system to download and lease DRM protected content for offline viewing. All users are welcomed to the application with an HTML experience that is seamlessly integrated into the application. Through an API, the HTML pages can execute actions in the parent AIR application, allowing Digital-Tutors to highlight important content easily. To keep content fresh, Vault has an integrated asset and data update system that ensures users have the most up-to-date local catalog assets. In fact, the AIR application is bundled with catalog assets (local database, images, HTML, and JavaScript) so users experience a robust application right from the start – even when offline.
With the ability to move category tabs such as Browse and Playlists as well as create and organize custom tags, notes and video clips, Vault provides an extremely customizable digital learning environment. The Vault application also automatically syncs custom user data across Digital-Tutors suite of applications, including web and iPhone, so that items like view progress and clips are consistent across all of a user’s devices.
Want to experience Vault for yourself: http://www.digitaltutors.com/09/vault.php
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.
This year, the RealEyes crew is toasting the Holidays Mad Men style. We wish our
clients and friends the very happiest of Holidays – we’ll see you all in 2010!
The Vermont Country Store has stocked hard-to-find apparel, personal care, food, candy and country home products since 1945. After a successful project re-engineering the store’s online checkout process, The Vermont Country Store engaged RealEyes Media to build one of the very first Facebook storefront applications.
The resulting application allows Facebook users to shop for select Vermont Country Store products without leaving the Facebook web application. The retailer can provide previews of products, special deals, or highlight inventory specials just to its Facebook fans and users, giving them additional incentive to interact with Vermont Country Store.
The application launched today!
Be one of the first to shop The Vermont Country Store on Facebook!
More than 40,000 students use A Beka Academy’s home school curriculum each year. This stalwart of distance learning for primary and secondary education has traditionally delivered its video-based instruction to students using physical media, a costly and time consuming process.
A Beka Academy engaged RealEyes Media to create a digital process to augment their traditional delivery model. The resulting project used the spectrum of Adobe tools to yield both an automated process to encode, encrypt, and transfer more than 14,000 hours of video to a CDN as well as a consumer application that students will use to view assigned classroom video content.
The automated encoding process was designed to empower A Beka Academy to process and deploy new video content without dependence on an external vendor.
The consumer application’s purpose is to allow for secure, on-demand access of high-quality video lessons to each student while strictly enforcing business rules and safeguarding intellectual property. Two versions of the consumer application were created to meet the school’s needs fully. A Flash, browser-based version allows students to view assigned streaming video lessons by day or by subject. The AIR desktop version extends these capabilities, allowing students to download DRM-protected files for offline viewing.
Challenge
In addition to providing a convenient, new delivery option for families using A Beka Academy curriculum, and realizing considerable ROI over time, the school undertook this project to meet the challenge of adequately enforcing its business rules. For example, the consumer application implements complex view rules based upon an individual student’s academic program, and enrollment status. This was not possible with the physical media delivery model. Furthermore, the school desired to enact more stringent control over its intellectual property to reduce or eliminate unauthorized use. DRM protection and SWF validation met this need.
This project also addressed other significant development challenges. These include:
- Thousands of hours of source video content needed to be captured from original physical media, encoded into H.264 format, secured with DRM protection, and deployed to a CDN.
- Families using the school’s curriculum are geographically diverse, with extreme variances in connection speeds, hardware performance, and technical knowledge.
- Instant access to streaming files was desired; however, it was also critical that students have the ability to view lessons when an internet connection was not available. Also, the ability to send the entire library of lessons via fixed media was desired to accommodate remote A Beka Academy schools.
Benefits
The school’s physical media delivery model required that three shipments of DVDs were sent to each student, and then returned to the school. There is considerable financial cost to this process including shipping, media, processing, and replacement of lost/damaged disks.
Providing these files as h.264 Flash Video files for streaming and DRM-protected download access via a CDN is significantly less expensive per-student than the traditional physical delivery model. Additionally, as more students adopt this digital delivery method, there is an economy of scale as origin storage costs are distributed among a larger student base.
Beatport is the recognized leader in electronic dance music downloads for DJs and club music enthusiasts. As much of the company’s success relies upon a customer’s ability to successfully navigate the Beatport.com website to preview and purchase tracks, Beatport’s decision to rebuild their Flash Platform website from the ground up was a significant one.
Although the site was highly successful, it was not as scalable and extendable as was required to incorporate the leading edge features Beatport desired for the 3.0 release of its site including:
- My Beatport, a robust user preference system for tracking musical tastes and favorites throughout the site
- Enhanced Playlists that allow users to queue albums and tracks for preview without interrupting browsing
- Sophisticated Menu Docking, akin to a desktop application makes full use of the visitor’s screen real estate
- Keyboard Navigation Support, allowing advanced users to navigate the site and player controls quickly
- Multi-Lingual Support to allow a full browsing experience for Beatport’s global community
- Personalized Offers, integrating features such as “users also bought” and other associations
- History Management, including full support for browser forward and back buttons
- Deep Linking that created a unique URL for all application views to restore state and included content
Beatport already had success working with RealEyes to develop the groundbreaking AIR application Beatport Downloader. RealEyes was then tasked with leading Beatport’s own internal development team in rebuilding all aspects of the current website, engineering a sophisticated new feature set, and architecting a scalable ActionScript 3.0 Flex application framework.
Challenge
To make the redevelopment effort a cost-effective one for Beatport, RealEyes leveraged two existing resources heavily during this project: existing data services and the internal Beatport development staff. The integration of both created some significant project challenges, while allowing for powerful synergies between the RealEyes and Beatport teams.
The existing data services were in a variety of formats and were constructed to facilitate the functionality of Beatport’s existing web application. RealEyes was able to use these existing services, regardless of XML, JSON, RDF, or RSS format, by using data translators to construct the appropriate Flex objects for Beatport’s new web application. While additional Flex development time was required, this decision represented a significant savings in time and budget when compared with constructing services customized for the new application. Further, should Beatport desire to optimize or change the data services in the future, the application allows for inversion of control, meaning that it is possible for Beatport to change data service properties without recompiling the Flex application itself.
One of the larger challenges of the development process was fully integrating RealEyes’ and Beatport’s internal developers and managers into a cohesive project team. Several processes including Agile project management, continuous integration, peer review, unit testing, and source control were implemented at the start of the project to facilitate open, yet streamlined collaboration. Further, RealEyes worked with the Beatport team to provide custom training and one-on-one developer mentoring.
Benefits
Beatport’s 3.0 website redevelopment project was a highly successful endeavor, benefiting the company’s community of music enthusiasts, while yielding substantial business gains.
Functional updates in the 3.0 release were targeted at making the web experience easier to navigate while providing additional levels of application personalization. User analytic data as well as testimonial feedback show new features such as the sophisticated menu docking system, robust user preference caching in My Beatport, and keyboard navigation enhanced user satisfaction levels as the site now conforms better to the target audience’s hardware and workflow choices. This increase in user experience resulted in tangible business benefits including higher user retention and additional store purchase revenue.
The 3.0 Beatport website is well equipped to change with the company’s evolving business objectives. Without recompiling, Beatport can modify how dynamic data is brought into the application. As Beatport’s own technical staff was an integral part of the development team, maintaining and extending the application after the initial launch was a seamless transition. Further, the use of industry best practices – such as a Cairngorm-based ActionScript 3.0 Flex framework – not only eases the ramp-up time for new developers, but makes the final application more stable, extensible, and scalable.
Follow Us!