Question

我必须在页面上放置许多小缩略图，并且每个缩略图都需要在点击时打开带有控件的全尺寸（640x480）视频。

Answer 1

我很惊讶没有Javascript专家拿这个。我的解决方案在这里：

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

Answer 2

我建议使用fancybox：

http://fancybox.net/

他们有一个“swf”的例子，我相信你可以根据自己的需要调整它。

Answer 3

之前我使用过Shadowbox.js并对此感到非常满意（主页上的视频示例较低）。您可以嵌入YouTube视频，自己的.flv文件（使用JW播放器），Vimeo视频等。

此外，它不使用任何JavaScript框架，因此可以保证使用您的代码。

js弹出窗口，使用jwplayer.swf播放.flv flash视频

3 个答案: