Question

我想使用fancybox，因为shadowbox-js.com已不再可用。我用它来显示图像和视频。现在我在shadowbox中设置了编码，因此它使用了一个特定的播放器，它使用旧的jwplayer皮肤调用xml文件，该文件包含海报图像和xml文件中的视频。我使用的代码如下：

<link rel="stylesheet" type="text/css" href="../shadowbox/shadowbox.css">
<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
<script type='text/javascript'> 
    Shadowbox.init({
language: 'en',
players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv', 'mp4', 'php'],
overlayOpacity: '0.90',
continuous: 'true',
counterType: 'default',
animSequence: 'wh',
handleOversize: 'resize',
modal: 'false',
flashVars: {skin: '../jwplayer/skins/norden/norden.zip'}
 
                       });
</script>

调用视频的链接编码如下：

<a href="/jwplayer/player.swf?file=videos/xml/jw_player2.xml" rel="shadowbox[Mixed];width=1280;height=720" title="World of Tanks - Official Video Trailers"><img src="images/wot-logo-dark-w-101-logo-600x253.png" border="0" width="600" height="253" title="" alt="101 ABGC Logo" /></a>

你可以在http://101abgc.mywebteks.net/看到我正在谈论的一个例子，只需点击坦克世界标志即可看到我在说什么。

我希望能用fancybox做同样的事情，就像我使用shadowbox调用xml文件播放视频一样，仍然使用我在代码中的jwplayer皮肤。用fancybox可以吗？

Answer 1

我使用jwplayer与fancybox的方式是将jwplayer代码放在一个隐藏的div中，该div也有fancybox div，然后链接将链接到那个内部div。

<a href="#video" id="popup" title="World of Tanks - Official Video Trailers">
    <img src="images/wot-logo-dark-w-101-logo-600x253.png" border="0" width="600" height="253" title="" alt="101 ABGC Logo" />
</a>

<div style="position:absolute; display:none;">
<div id="video" style="overflow: hidden;">
    <div id="fancy">
        &nbsp;</div>
    <script type="text/javascript">
jwplayer('fancy').setup({
        'width': '100%',
        'height': '16:9',
        'file': '[insert video file here]',    
        'image': '[insert video still here]',
        'autostart': 'false',
        'skin': '/jwplayer/player.swf?file=videos/xml/jw_player2.xml',
    });
  </script>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#popup").fancybox({ // matches the selector of the fancybox links
        'titlePosition' : 'inside',
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'autoScale' : false,
        'autoDimensions' : false
        });
});
</script>

使用fancybox和XML调用视频

1 个答案: