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

jw-player

 

JW Player

Product Documentation

Developer Links

Embedding Flash

Share

NOTE: This document is outdated.  For the most updated versions, please refer to the player-specific embedding flash guides:  Supported Player Embed Methods for v5 or Supported Player Embed Methods for v4.


Purpose

This guide will familiarize you with two popular ways to embed Flash in your website: 1.) the Object/Embed method, and 2.) the SWFObject method.

Introduction

Knowing how to embed Flash is a necessary skill if you wish to take advantage of Flash’s rich feature set. Even using the JW Player on your website requires that you know how to perform this essential task.

Flash can be embedded into a website using two techniques, as stated above. This lack of a standard method for embedding Flash often breeds confusion and some head scratching. Unnecessarily so. After reading this tutorial, you should have no problem using one or both of the methods discussed here.

The first method for embedding Flash involves using the HTML Object and Embed tags. This method is the more direct of the two, but suffers from cross-browser compatibility issues, which can cause a lot of confusion. This confusion is due, again, to the absence of a standard embed method—Internet Explorer uses the <object> tag, while Firefox, Safari, Chrome, and Opera use the <embed> tag.

The second technique, what we call the SWFObject Method, makes use of the SWFObject, which is a JavaScript library. This library attempts to automate the embed process and abstract away the intricacies of embedding in the various web browsers.

We highly recommend that you use SWFObject v1.5 for your Flash embedding. In fact, we like it so much that we use it for all of the embedding on this site. Detailed instructions can be found below.

Contents

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"
/>

Note: This example presumes there's a player.swf file located in the same directory as the HTML page it's being embedded in. If you're planning on using JavaScript, please don't use <object> or <embed> tags, as JavaScript interaction does not work with an embed code; you'll need to use the SWFObject method for that, which we explain later in this guide.

Of these parameters, the <embed> src and the <object> movie attributes are the most important. They contain the location of the SWF file to include (here, player.swf). If the SWF file resides in another 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).

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.

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>

The SWFObject Method

If building a standards-compliant and web accessible site is a priority, you should use the SWFObject method. Even though the Object/Embed method works in all browsers, web accessible sites require XHTML and <embed> is not a valid XHTML tag.

Of course, if you really want to use the Object/Embed method, a workaround does in fact exist. This involves using JavaScript to embed Flash content. After a web page has loaded, you can insert the embed tag, effectively circumventing the XHTML problems. As a bonus, you can use JavaScript to determine whether the correct Flash Plugin is available on your visitor's computer. If it isn’t, alternative content can be loaded.

SWFObject

The SWFObject script by Geoff Stearns 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 upload the swfobject.js to your server and include a script tag in the head of your HTML document:

<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="flashContent">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, visit the SWFObject Website). This varies between versions of SWFObject, but we've included an example from each to guide you.

SWFObject 1.5 (recommended)

<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>

SWFObject 2.X

<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>

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.

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. If you want to generate specific embed codes for the JW Player or the Image Rotator, try our setup wizard.