js彈出窗口使用jwplayer.swf播放.flv Flash視頻

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>

來源

2010-05-27 07:00:14

0

我建議使用的fancybox：

http://fancybox.net/

他們有一個「SWF」的一個例子，我敢肯定，你可以爲你自己的目的適應這一點。

來源

2010-05-27 06:52:25

+0

謝謝我看着這個和燈箱和其他一些花費大約50美元。他們沒有做我所需要的。 – 2010-05-27 07:03:58

+0

當然:)它也被一些漂亮的主要網站使用，比如http://www.woot.com – 2010-05-27 07:05:27

0

我用Shadowbox.js之前，很高興它（視頻的例子是在主頁上更低）。您可以嵌入YouTube視頻，您自己的.flv文件（使用JW Player），Vimeo視頻等。

此外，它不使用任何JavaScript框架，因此它可以保證與您的代碼一起工作。

來源

2010-05-27 07:05:06

+0

我無法確定是否有可能避免頁面模糊不清。沒有迴應支持... – 2010-05-27 07:46:46

+0

您可以通過JS激活ShadowBox並將showOverlay選項設置爲false，或編輯實際的shadowbox.js並更改showOverlay：true以showOverlay：false – 2010-05-27 08:53:13

js彈出窗口使用jwplayer.swf播放.flv Flash視頻

回答

相關問題