CODEWITHSUNDEEP
javascriptflash
Mike Trader
Mike Trader

Reputation: 8704

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

I have to have many small thumbnails on a page and each one needs to open up to a full size (640x480) video with controls when clicked.

Upvotes: 0

Views: 7785

Answers (3)

Vic
Vic

Reputation: 12527

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.

Upvotes: 0

Mike Trader
Mike Trader

Reputation: 8704

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

Upvotes: 1

Kerry Jones
Kerry Jones

Reputation: 21858

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.

Upvotes: 0

Related Questions