JavaScript to Embed a Flash Movie

30th April 2006

With the recent changes to how Internet Explorer handles active content, such as Flash, there has been a lot of attention paid to various JavaScript solutions that allow you to continue to seamlessly embed this content into pages. Probably the most popular of which being the pretty neat FlashObject, uh, sorry thanks to Adobe that’s now SWFObject — well, what else would you expect from the people behind the guidelines on the Proper use of the Photoshop trademark. Neat as SWFObject is, one problem with scripts such as this is that they never seem to work in pages served using application/xhtml+xml. I needed a script that did, so here it is.

I wasn’t really bothered about building any kind of Flash detection or version checking into my script, I just wanted something that I could use in “real” XHTML pages and ideally didn’t fall back on using the non-standard embed tag. The script should also be unobtrusive and should provide alternative content if either JavaScript or Flash isn’t supported. As the main difference between this and other similar scripts is that it is able to work in pages using application/xhtml+xml (which few people are using), it should probably be noted that in general something like SWFObject would be a better choice than this ;-)

Use of the script is quite similar to SWFObject. You write your alternate content into the page, then the JavaScript replaces this with the Flash. In it’s simplest form it could have a page a little like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flash embed test</title>
<script type="text/javascript" src="fo.js"> </script>
<script type="text/javascript">
var fo = new FO('filename.swf');
fo.write();
</script>
</head>
<body>
  <p>Your alternate content here</p>
</body>
</html>

This would write the movie, filename.swf directly into the body of the page using some default values for properties such as width, height, id, player version etc… Notice all the code can be kept in the head, or written in an external file included in the head. Of course you’d most likely want to override some of these defaults and maybe control some other parameters for the movie. This can be done by passing an object as a second argument to the FO constructor, like this:

var fo = new FO('filename.swf', 
    {width: '100%', height: '100%', 
     menu: 'false', version: '7,0,0,0'});
fo.write();

You can include any parameters you like in this object, the test cases later will include a few more examples of these. You might also have pages where your Flash movie isn’t the only content. In this case you obviously wouldn’t want the Flash to overwrite everything on the page. To solve this the write method accepts an optional argument, a string containing the id of an element in the page. When this argument is supplied the movie will be inserted into the corresponding element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flash embed test</title>
<script type="text/javascript" src="fo.js"> </script>
<script type="text/javascript">
var fo = new FO('filename.swf', {width: '550', height: '400'});
fo.write('my-movie');
</script>
</head>
<body>
  <div id="my-movie">
    <p>Your alternate content here</p>
  </div>
  <p>more content…</p>
</body>
</html>

One really useful feature of Flash is the flashvars parameter, this allows you to pass variables into a movie from the page it is contained in. With this script you can use flashvars in a couple of ways. First you could include flashvars in the call to the FO constructor,

var fo = new FO('filename.swf', 
    {width: '100%', height: '100%', 
     flashvars: '&myvar=hello world&'});

Alternatively, there is also a method, addVar, that allows variable name/value pairs to be included in the flashvars parameter, here’s an example.

var fo = new FO('filename.swf', {width: '550', height: '400'});
fo.addVar('variableName', 'variable value');
fo.addVar('anotherVariable', 'another value');
fo.write();

Test cases

All the following test pages are served using application/xhtml+xml to browsers that support (and prefer it) and use text/html otherwise.

Basic
The simplest test, the movie is directly inserted into the body of the page, all parameters take their default values.
Fullscreen 1
The movie should fill the available space in the browser viewport, the right click menu should also be minimised.
Fullscreen 2
Similar to Fullscreen 1, but this also uses the scale and salign parameters.
location.search
Transfers variables from the query string on the page into the movie.
Placeholder 1
The movie is inserted into a placeholder element, only the alternate content for the Flash movie should get replaced.
Placeholder 2
Inserts multiple movies into the page in separate placeholder elements. It uses flashvars to pass some differnent text into each movie.

Feel free to download use and modify this script as you wish. Bug reports and browser compatibility checks are very welcome.

Permalink. Posted on 30th April 2006 in Flash, JavaScript, Web Standards.

Comments

  1. Your site is so beautiful

    # Posted by Fee CoMSPU on 24th October 2006.

  2. thank you very much now i can use flash on my bad blog.

    # Posted by cartoon wallpaper on 27th February 2007.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening