Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Embedding Flash


Purpose

This reference guide will familiarize you with several popular ways to embed Flash applications on your website.

NOTE: This document is a general document on embedding Flash. If you are looking for more specific information on embedding the JW Player (in particular to support HTML5 Mode), please see our: Supported Player Embed Methods Guide, or the JW Embedder Reference Guide.

Contents

Introduction

Understanding how to embed Flash is a necessary skill in order to take advantage of the rich feature set Flash offers. For example, when using the JW Player for Flash & HTML5 on your website, a basic knowledge of Flash, and an understanding of the embed methods, is required.

Unlike many graphical web assets, like images or CSS, there is more than one way to embed Flash on your site. The lack of a sole standard method for embedding Flash often breeds confusion and some head scratching. We urge you to read through this guide, and familiarize yourself with each of the methods discussed here.

The Object Tag and the Embed Tag

Let's start with the easiest way to embed Flash in a website — a single embed tag (expressed as <embed>) or object tag (expressed as <object>).

<object> tag syntax

If you plan on embedding the player.swf file into Internet Explorer, you can use the object tag. To configure the player.swf using the object tag, apply the parameter tag, expressed as <param>—which lets you specify Flash parameters and Flash variables (flashvars) by using an '&' delimited list of key-value pairs, as shown below:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
   <param name='movie' value='player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='flashvars' value='file=playlist.xml&dock=true'>
</object>

<embed> tag syntax

If you are embedding the player.swf into Chrome, Firefox or Safari, use the Embed tag (<embed>).  To configure the embed tag, specify each Flash parameter and the flashvars (as as an '&' delimited list of key-value pairs, as above) as attributes of the tag.

<embed
   src="player.swf" 
   width="300"
   height="300"
   allowscriptaccess="always"
   allowfullscreen="true"
   id="player1"
   name="player1"
   flashvars="file=playlist.xml&dock=true"
/>

How to use <object> and <embed>

In the embed code shown above, the <embed> src and the <object> movie attributes are the most important. They contain the location of the SWF file you want to include (in this case, we're embedding the JW Player's swf file, player.swf). If the SWF file resides in a different directory, we can point to it with an absolute path (the full URL; e.g. http://www.myserver.com/flash/player.swf) or a relative path (e.g. flash/player.swf or /jwplayer/player.swf).

The width and height parameters determine the SWF's dimensions in pixels, but they can also be entered as a percentage of the SWF container (e.g. width="100%").

The allowscriptaccess parameter allows the SWF to communicate with external scripts (and link to external pages), while allowfullscreen uses the full-screen mode. If you do not want to allow this, you can remove both parameters, since they default to sameDomain and false, respectfully.

Within the page, the player is indentified by the id and name parameters. They are what allow for player control through JavaScript and the styling of the player.

Finally, the flashvars parameter. This parameter specifies what Flash variables will be loaded in the SWF. The JW Player uses these extensively, as they specify the player's configuration.

Extra Parameters

The code listed in the two examples above uses only a few of the available parameters. A complete list of them can be found at Adobe's website. Here's a brief list of the most interesting parameters:

  1. bgcolor (#rrggbb): sets the SWF background color using a hexadecimal value.
  2. menu (true, false): set this to false to hide most of the right-click menu.
  3. wmode (opaque, transparent, window): set this to either transparent or opaque to fix z-index or flickering issues.

Some things to remember:

The Object / Embed Method

By themselves, <object> and <embed> tags won't work in every browser. Thankfully, it's possible to nest the embed tag within the object tag in such a way that it will work with all browsers. Using our example above, notice how the highlighted portion containing the embed tag is nested within the larger object tag.

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
   <param name='movie' value='player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='flashvars' value='file=playlist.xml'>
   <embed id='player1'
          name='player1'
          src='player.swf'
          width='300'
          height='300'
          allowscriptaccess='always'
          allowfullscreen='true'
          flashvars="file=playlist.xml"
   />
</object>

JavaScript Flash Embedding Libraries

If building a standards-compliant and web accessible site is a priority, a good way to accomplish that goal is to use a JavaScript Flash embedding library, such as SWFObject. Even though the Object/Embed method works in all browsers, the <embed> tag is not a valid XHTML tag and will fail most XHTML validators.

SWFObject

The SWFObject script is an excellent, freely available JavaScript that embeds Flash. It's used extensively on this site, and it's our recommended method for embedding Flash content.

First, you'll need to download the swfobject.js and upload it to your server. Then you'll need to include a script tag in the head of your HTML document which loads the library:

<script type="text/javascript" src="swfobject.js"></script>

Next, give a unique id to the HTML element in which the SWF should be placed.

<div id="flashbanner">This will be replaced by the SWF.</div>

Finally, you'll need to instantiate a SWFObject below the named HTML element, along with all the necessary parameters (for a full list of parameters, refer to the SWFObject documentation). This varies between versions of SWFObject, but we've included an example from each to guide you.

SWFObject 2.X (recommended)

<script type="text/javascript">
   var flashvars = {
      'file':               'playlist.xml',
      'autostart':          'true'
   };

   var params = {
      'allowfullscreen':    'true',
      'allowscriptaccess':  'always',
      'bgcolor':            '#ffffff'
   };

   var attributes = {
      'id':                 'player1',
      'name':               'player1'
   };

   swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>

SWFObject 1.5 (deprecated)

<script type="text/javascript">
    var so = new SWFObject('player.swf','flashContent','300','250','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addParam('bgcolor','#FFFFFF');
    so.addParam('flashvars','file=playlist.xml&autostart=true');
    so.write('flashbanner');
</script>

The SWFObject instance will create the code neeeded to embed the player.swf. It sets the player's dimensions to 300 x 250 pixels and also sends the flashvars for the file and autostart variables. The instance also replaces the text by the SWF, so we can see a Flash movie directly embedded in our page without borders but with XHTML validity.

The JW Embedder

Since the JW Player is now more than a simple Flash component, it requires the use of a special JavaScript library called the JW Embedder to take advantage of all of the features the JW Player supports. These features include HTML5 support (including support for Apple iOS devices), and the player's JavaScript API

Just like SWFObject, the JW Embedder allows you to set up your player using valid XHTML and will select the appropriate embed method for each user's browser, including mobile devices that don't support Flash, such as the iPhone and iPad. The JW Embedder Reference Guide explains how to use the JW Embedder in more detail, but in general, your embed code will look something like this:

<div id="container">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "/jwplayer/player.swf",
        file: "/uploads/video.mp4",
        height: 270,
        width: 480
    });
</script>

 

Wrapping Up

This brings our Embedding Flash tutorial to a close. You should now be able to embed Flash in any website. For more hints and tips on embedding Flash, or if you still have unasnwered questions, please visit our forum.