ansaurus

Question

js popup window to play .flv flash video using jwplayer.swf

Answer 1

A:

I suggest using fancybox:

http://fancybox.net/

They have an example with a "swf", I'm sure you can adapt this for your own purposes.

Kerry 2010-05-27 06:52:25

Thanks I looked at this and lightbox and a couple of others that cost around $50. None of them did what I needed.

Mike Trader 2010-05-27 07:03:58

Sure :) it's also used by some pretty major sites, such as http://www.woot.com

Kerry 2010-05-27 07:05:27

Answer 2

A:

I am surprised no Javascript experts took this. My solution is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
    <title>PopUp Player using JWPlayer</title>
    <meta   http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
      input
      {
        width:                                    300px;
        height:                                    32px;
        font:              bold 13px Verdana, serif;
        text-align:                              center;
        color:                                  #fe0320;
        background:            url(player.gif) repeat-x; // 1px wide, 32px high
        cursor:                                 pointer;
        border:                                       0;
      }

      img
      {
        position:                              relative;
        display:                           inline-block;
        float:                                     left;
        border-width:                                 0;
        margin:                                       0;
        padding:                                      0;
        font-size:                                    0;
        cursor:                                 pointer;
        z-index:                                      1;
      }

      div.clickmecontainer
      {
        cursor:                                 pointer;
      }

      div.clickme
      {
        position:                              absolute;
        display:                           inline-block;
        width:                                     79px;
        top:                                        50%;
        margin-top:                               -15px;
        text-align:                              center;
        color:                                    white;
        font-family:                            Journal;
        font-size:                                1.5em;
        z-index:                                      2;
      }

      div.playerpopup
      {
        position:                              absolute;
        top:                                      100px;
        left:                                     100px;
        z-index:                                    100;
      }
    </style>



    <script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
    <script type="text/javascript">google.load('swfobject', '2.2');</script>
    <script type="text/javascript">
      var swf = false;

      function addSwf(file, width, height, id)
      {
        clearSwf();

        if((id != '') && (id != undefined))
        { // alert('The '+gid(id).nodeName+' element with id="' + id + '"\nTop: '+gid(id).style.top + '\nLeft: ' +gid(id).style.left );
          gid('playerpopup').style.top  = ((gid(id).style.top.replace( 'px', '') * 1) - 500) + 'px';
          gid('playerpopup').style.left = ((gid(id).style.left.replace('px', '') * 1) + 60) + 'px';
          setTimeout("swf = true;", 1000); // alert('New nTop: '+gid('playerpopup').style.top + '\nLeft: ' +gid('playerpopup').style.left );
        }
        else
        {
          gid('playerpopup').style.top  = 'px';
          gid('playerpopup').style.left = 'px';
          setTimeout("swf = true;", 1000);
        }

        gid('playerpopup').innerHTML='<a id="player"class="player"href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"&gt;Adobe Flash Player</a><div><input type="button" style="width:'+width+'px;" value="--  C L O S E  --" onclick="clearSwf(); return false;"></div>';

        var flashvars =
        {
          'file':                                   file,
          'frontcolor':                            'd3d3d3',
          'backcolor':                             '000000',
          'lightcolor':                            '6d6c6b',
          'screencolor':                           '373737',
          'id':                                    'playerID',
          'autostart':                             'true'
        };

        var params =
        {
          'allowfullscreen':                       'true',
          'allowscriptaccess':                     'always',
          'wmode':                                 'opaque',
          'bgcolor':                               '#FFFFFF'
        };

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

        swfobject.embedSWF('player.swf', 'player', width, height, '9.0.124', false, flashvars, params, attributes);
      };


      function clearSwf()
      {
       if(swf)
       {
         swfobject.removeSWF('playerID');
         gid('playerpopup').innerHTML = '';
         swf = false;
       }
      };


      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>

</head>




<body bgcolor="white";>


   <div id="12345" style=" position:absolute; top:606px; left:120px; width:180px; height:30px; z-index:19;">

     <img alt="Preview" src="Preview.jpg" width="80" height="60" onClick="addSwf('video.flv', 640, 503, this.parentNode.getAttribute('id'));" />

   </div>

   <div id="playerpopup" class="playerpopup"> </div>

</body>

</html>

Mike Trader 2010-05-27 07:00:14

Answer 3

A:

I used Shadowbox.js before and was very pleased with it (video examples are lower on the homepage). You can embed YouTube videos, your own .flv files (using JW Player), Vimeo videos, etc.

Also, it doesn't use any JavaScript framework so it's guaranteed to work with your code.

Victor Stanciu 2010-05-27 07:05:06

I could not determine if it was possible to avoid the obscuring of the page beneath. no response from support...

Mike Trader 2010-05-27 07:46:46

you can either activate ShadowBox via JS and set the showOverlay option to false, or edit the actual shadowbox.js and change showOverlay: true to showOverlay: false

Victor Stanciu 2010-05-27 08:53:13

ansaurus

tags:

views:

answers:

js popup window to play .flv flash video using jwplayer.swf

related questions