CODEWITHSUNDEEP
javascriptflashswfobject
Abadaba
Abadaba

Reputation: 1466

After installing flash, swfobject still wont embed video until i reload the original page

I have a simple html page with some javascript where if i click a link, it will show a flash video in a div using the swfobject.embedSWF function.

I did a test:

  1. Uninstalled flash from my machine, then reloaded the page and clicked the link...I correctly saw no video.

  2. I then installed flash and came back to the same page (no reload) and the embed still won't work.

I know in swfobject 1.5 (I'm now using 2.2), I would be able to embed the swf after the user installs flash, but now the user needs to reload the page in order to get the flash to appear. This is not good for my current situation, anyone know what is going on here?

Here is sample code using a youtube video:

<!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" xml:lang="en" lang="en">
<head>
    <title>SWFOBJECT TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'></script>
    <style>
        #link{
            display:block;
            margin-bottom:10px;
        }
        #videoContainer{
            width:610px;
            height:360px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#link").click(function(){
                var flashVars = {};
                var params = {};

                flashVars["lang"] = "en";

                params["menu"] = "false";
                params["wmode"] = "opaque";
                params["allowScriptAccess"] = "always";
                params["allowFullScreen"] = "true"; 
                params["bgcolor"] = "#fff";

                //add video
                swfobject.embedSWF("http://www.youtube.com/v/uZ0LL1SJ-6U?enablejsapi=1&playerapiid=ytplayer", "videoContainer",640, 480, "9.0.0", null, flashVars, params,{});
            });
        });
    </script>
</head>
<body>
    <a href="#" id="link">Click me</a>
    <div id="videoContainer"></div>
</body>
</html>

Upvotes: 0

Views: 795

Answers (1)

A_Rival
A_Rival

Reputation: 11

If you take your swfEmbed call out of the jquery, it works. I didn't really delve in to far, but I did this:

<a href="javascript:replaceDiv()" id="link">Click me</a>

I made a new function called replaceDiv, which basically just does everything you are already doing in your jquery click function.

function replaceDiv () {
                var flashVars = {};
                var params = {};

                flashVars["lang"] = "en";

                params["menu"] = "false";
                params["wmode"] = "opaque";
                params["allowScriptAccess"] = "always";
                params["allowFullScreen"] = "true"; 
                params["bgcolor"] = "#fff";

                //add video
                swfobject.embedSWF("http://www.youtube.com/v/uZ0LL1SJ-6U?enablejsapi=1&playerapiid=ytplayer", "videoContainer",640, 480, "9.0.0", null, flashVars, params,{})
}

I then removed all of your existing JS and VOILA- works every time.

Let me know if you want me to actually try to debug your JQuery; I might add that it looks perfectly fine. You may be needing something else, I don't know.

-A

ps. Squarepusher is a BEAST. :P

Upvotes: 1

Related Questions