Accessibility
Jens Loeffler

Jens Loeffler

Adobe

Table of Contents

  1. Introduction
  2. Creating the video upload component
  3. Setting up video encoding
  4. Configuring Flash Media Server
  5. Building the thumbnail browser
  6. Adding the video player
Created:
3 August 2009
User Level:
Intermediate, Advanced
Products:
Flash Media Server
Flex

Creating a video sharing web application using Flex, Flash Media Server, and Flash Media Encoding Server

Adobe Flash has revolutionized the way people consume video today, and traditional media is just a small part of it. The revolution started with user-generated content—the dancing bird, the barking puppy, the latest news from the person who just happened to be at an event. The key for success of user-generated content is the ability to offer a very user-friendly experience to upload, share videos, and watch them without hassle. All of this makes the Adobe Flash platform—with Adobe Flash Player penetration at 99%—an ideal choice for video sharing web applications.

This article demonstrates how to create your own social media application in just a few steps, hopefully providing you with a sound foundation to build your own experience. It's important to note that Adobe Flash Media Server allows capturing directly from your webcam while you're online. Instead of focusing on this feature, however, this article describes an easy-to-use upload/transcode/playback workflow.

The goal of this article is to demonstrate how to create a video sharing application as follows:

  1. Using Adobe Flex, display video thumbnails of videos.
  2. Using Flex, select a video file from the user's local hard drive.
  3. Using Flex and PHP, upload the file to the web server.
  4. Using Flash Media Encoding Server, transcode the video.
  5. Using Flex and Adobe Flash Media Server, update the video thumbnail list.
  6. Using Flex and Flash Media Server, enable the user to click on a thumbnail to play the video in the video player.

Figure 1 provides an architectural diagram of the application discussed in this article.

Video sharing application architecture

Figure 1. Video sharing application architecture

It's possible to combine the web server, Flash Media Encoding Server, and Flash Media Server on a single machine, but it can affect performance. Ideally the Flash Media Server is on a dedicated machine to allow maximum throughput.

Note: I chose to build the front end using Flex Builder, but it is also possible to build this in Adobe Flash.

Requirements

In order to make the most of this article, you need the following software and files. Please make sure that this software is installed before continuing.

Flex Builder 3

Flash Media Development Server or Flash Media Interactive Server

(includes Apache HTTP server but requires additional PHP install)

Note: You can also use Flash Media Server and a separate web server with PHP support.

Flash Media Encoding Server

Sample files:

Prerequisite knowledge

This article targets intermediate to experienced web developers. Knowledge of Flex, PHP, and server configuration is recommended.

Page 1 of 6
Next Page

About the author

Jens Loeffler is a technical evangelist for Adobe Systems, responsible for driving awareness, adoption, and loyalty of Adobe Flash streaming video products and services within the media and entertainment industry. In his role, he provides consultative leadership for technical and sales activities and supports the core product management and marketing team. Having a sophisticated understanding of Flash technologies and strategy, as well as broad engineering, multimedia and visual skills, Jens is a passionate Flash and Flash Media Server expert. He has worked with Flash and related Adobe products since 1999 and has received several industry awards for his work. Prior to joining Adobe, Jens worked as a senior Flash developer for R/GA and Creative Bubble. He has spoken at such industry events as Streaming Media East, Flash in the Can, and Flashbelt.