by Greg Hamer
Table of contents
18 October 2010
Prior experience working with HTML and an understanding of basic HTML concepts.
Video file uploaded to a web server.
Web page uploaded to a web server that contains player embed code.
To share your video with the world, the quickest and easiest way is to put it on the web. In order for viewers to watch your video, a video player is needed. To make this easy for everyone, Adobe has released a free player, called the Flash Media Playback video player. This video player is available online to make it convenient to find whenever you need it. You can use the player on any web page by adding a small amount of code to it (see Figure 1).
This article describes how easy it is to publish video using the Flash Media Playback video player. I also provide an overview of the powerful options available, and give a demo that walks you through the simple basics of getting the HTML embed code for the video player and pasting it into a web page.
Flash Media Playback (FMP) is a great video player for bloggers, small businesses, enterprise websites, and anyone who wants a simple solution to provide a simple, web-based video experience. Flash Media Playback handles the complexities of connecting to your video source, providing viewers with high-quality video playback.
To incorporate the Flash Media Playback video player into your web page, simply add the player embed code to the HTML page. When visitors load the web page in a browser, FMP is automatically displayed with your video playing on the page.
There are two ways to create the embed code necessary to use FMP:
- Flash Media Playback Setup page
- Manually edited embed code
Flash Media Playback Setup page
To copy the embed code, visit the Flash Media Playback Setup page at osmf.org/configurator/fmp/. The Flash Media Playback Setup page (see Figure 2) contains two main sections on the left and the right. Use the form on the left to enter the values for your video: video source location and various custom settings. The right side of the page contains a preview player and the preview embed code. Enter the values and then click Preview to generate the proper embed code.
The form includes two required fields that must be set:
- Video source URL (link to the video file)
- Player dimensions (width and height)
Many other configurable parameters are supported by FMP. However only the values listed above are required; the other parameters are either optional or populated with default values. The embed code will be generated correctly as long as you provide the video's URL and dimensions of the player.
Two tabs appear along the top of the Flash Media Playback Setup page:
- Player (selected by default)
To learn more about these options, see the documentation:
Manually edited embed code
If you are familiar with HTML code, you can manually edit the FMP embed code rather than copying the code from the Flash Media Playback Setup page. You can use any text editor to update the embed code. If desired, you can begin by pasting some existing embed code and then editing it; you can also hand type the embed code from scratch.
Note: If the hand-coded embed code contains errors due to typing mistakes, the player may not load and the video may not play. Since code errors can be difficult to resolve, manual editing is recommended only if you have experience troubleshooting HTML code. An HTML editor such as Adobe Dreamweaver CS5 can be helpful when editing the code manually.
This presentation walks you through the simple basics of getting the HTML embed code for the Flash Media Playback video player and pasting it into a finished web page.
In addition to the full documentation for Flash Media Playback, Adobe maintains a support forum. FMP users can access this resource to get answers and learn best practices. Visit the Flash Media Playback forum to participate with the community and ask questions about FMP.
FMP is a great out-of-the-box video player solution. It's easy to implement and supports various customizations to change the player's appearance. The Strobe Media Playback (SMP) is another solution you can try.
FMP and SMP are substantially the same—both support the same methods for configuration and skinning. However, FMP does not include the following two features that are available when working with SMP:
- Freedom to host the player on any web server
- Access to player source code
Although SMP enables you to host the player on any web server, this freedom comes with a downside: the inability to use Flash Player caching. The first time any visitor loads a web page that includes FMP, FMP is downloaded and stored in their computer's Flash Player cache (using a special, signed file with a SWZ file extension). From then on, whenever the visitor accesses other pages that use FMP, FMP loads very quickly because it is already installed on their computer. As a result of Flash Player caching, first time viewing of videos is faster with FMP than with SMP.
Because SMP is an open-source project, and the source code is available, organizations with experienced ActionScript programmers can extend the code and customize their players in many ways that are not available when using the standard FMP player provided by Adobe.
For video and media players requiring even more customization, developers can leverage the powerful Open Source Media Framework (OSMF). Both FMP and SMP are built on top of OSMF. There is continuous development being performed on OSMF—and as OSMF gains new features, they will be available in future releases of both FMP and SMP.
For more information about OSMF, visit OSMF.org. Also read my article titled Open Source Media Framework: Introduction and Overview.
Adobe Creative Suite 5 applications include many additional options for displaying video on the web. For example, Adobe Flash Professional CS5 includes an easy-to-use video playback component called the FLVPlayback component, and Dreamweaver CS5 provides a helpful user interface to insert FLV video files in HTML pages. For more information about these options see the following articles: