0

Folk's，我正在使用 Fancybox 和 Jwplayer 来显示视频，就像使用照片一样。我的问题是导航栏永远不会隐藏。此外，视频从 768px（原始尺寸）调整为 725px（显示尺寸），我不知道为什么。这是代码：HTML

 <a class="video" href="../img/advertising/img/video/NEOCLAIM_Femme.flv" title="NEOCLAIM Femme"><img src="../img/advertising/ico/ic02-neocalmF.jpg" alt="" /></a>

和 JS

   $("a.video").click(function() {
   $.fancybox({
    'scrolling' : 'no',
    'padding' : 0,
    'title' : this.title,
    'type' :'swf',
    'content': '<embed src="../jwplayer/player.swf?file='+this.href+'&amp;autostart=true&amp;fs=1" type="application/x-shockwave-flash" width="768" height="432" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>',
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(0, 0, 0, 1)'
            }
        }
    }              
   });
   return false;
  });

我是初学者，找不到解决方案。谢谢您的帮助。这是页面的链接在此链接之后，您必须单击第一个缩略图

4

1 回答 1

1

这并不是真正的花式问题，而是您可能在 LongTail 支持论坛上发现的问题。

如果您想隐藏（并在悬停时显示）JWPlayer 控制栏，您只需通过 flashvar 将其放在“上方” controlbar=over...这样当鼠标空闲时控制栏将自动隐藏，如果您悬停则显示播放时的视频。

另一方面，您可以使用data-*链接中的 (HTML5) 属性传递每个视频的特定大小，例如：

<a data-width="352" data-height="270" class="video" href="../img/advertising/img/video/NEOCLAIM_Femme.flv" title="NEOCLAIM Femme"><img src="../img/advertising/ico/ic02-neocalmF.jpg" alt="" /></a>

...（使用每个视频的正确值width和height值）并在您的 fancybox 脚本中，使用 API 选项防止自动调整大小.... 然后使用回调fitToView: false捕获每个视频的尺寸。afterLoad

您完整的 fancybox 自定义脚本应该如下所示： 

$(document).ready(function () {
  $(".video").fancybox({
    padding : 0,
    fitToView: false, // fancybox won't auto-resize to fit in viewport
    content: '<span></span>', // create temp content
    scrolling: 'no',
    helpers : { overlay : { css : {  'background' : 'rgba(0, 0, 0, 1)' }  }  },
    afterLoad: function () {
      var $width = $(this.element).data('width'); // get dimensions from data attributes
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='jwplayer.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque&amp;controlbar=over' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });
}); // ready

...请注意，我们添加controlbar=over了对象的字符串值this.content。另请注意，我们没有使用该.click()方法，而是将 fancybox 直接绑定到选择器.video。此外，我们实际上不需要'title' : this.title，或者'type' :'swf'我删除它们。

演示？……看这里

于 2013-01-20T21:46:50.773 回答