javascripthtmlswfobject

swfobject.embedSWF not working?

The following code embedding a Flash animation into an HTML document using SWFObject displays only the alternative content. Why?

<!DOCTYPE html>
<html>
    <head>
        <title>Adding a Flash Movie</title>
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
        </script>
        <script type="text/javascript">
            swfobject.embedSWF("flash/bird.swf", "bird", "400", "300", "8.0.0");
        </script>
    </head>
    <body>
        <div id="bird">
            <p>An animation of a bird taking a shower</p>
        </div>
    </body>
</html>

Chrome, IE and Firefox all show just An animation of a bird taking a shower.

The code is a sample from the book HTML & CSS: design and build websites.

Solution

  • SWFObject 2.2 no longer works properly. The bug in SWFObject has already been reported on GitHub, but the library is unmaintained.

    The new “HTML by default” Flash policy starting at Chrome 55 does not initialize the variables that SWFObject uses to detect whether Flash is installed. Specifically, navigator.mimeTypes no longer contains application/x-shockwave-flash, unless Flash is enabled by the user. Other browsers have similar issues related to the click-to-run activation scheme introduced as part of Flash’es end of life.

    At this time, the best course of action may be to simply use <object> to embed Flash. For example:

    <object type="application/x-shockwave-flash" data="app.swf">
    <param name='movie' value="app.swf"/>
    <param name='bgcolor' value="#999999"/>
    <param name='FlashVars' value="var1=Hello&var2=Goodbye" />
    <param name='allowscriptaccess' value="sameDomain"/>
</object>

    Note that (1) the .swf is specified in two places (2) only the movie param is required; the other params are shown here as an example of what is possible.