Fancybox中的JW Player.无法隐藏控制栏 [英] JW Player in Fancybox. Can't hide control bar

问题描述

伙计， 我正在使用Fancybox和Jwplayer来显示视频，就像处理照片一样.我的问题是导航栏永远不会隐藏.另外，视频的尺寸从768px(原始尺寸)调整为725px(显示尺寸)，我不知道为什么.这是代码: HTML

Folk's, I'm using Fancybox and Jwplayer to show videos like it does with photos. My problem is that the navigation bar won't never hiding. Also, the video resize from 768px (original size) to 725px (display size) and I don't know why. Here is the code : 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;
  });

我是一个初学者，无法找到解决方案. 感谢您的帮助. 这是指向页面的链接，此链接之后，您必须单击第一个缩略图

I'm a beginner and can't find out the solution. Thank you for your help. here is a link to the page After this link you must click on the first thumbnail

推荐答案

这实际上不是花哨的问题，但您可能在LongTail支持论坛上发现了一些问题.

That is not really a fancybox issue but something you may have found on LongTail support forums.

如果您想隐藏(并在鼠标上显示)JWPlayer控制栏，则只需通过flashvar controlbar=over将其放置在"上方"上...这样控制栏将自动-鼠标空闲时隐藏；如果在视频播放时将其悬停，则会显示.

If you want to hide (and show on hover) the JWPlayer control bar, you just need to place it "over" via the flashvar controlbar=over ...so the control bar will auto-hide when the mouse is idle and show up if you hover the video while it plays.

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

On the other hand, you can pass the specific size of each video using the (HTML5) data-* attribute in your link like :

<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回调.

... (use the proper width and height values of each video) and in your fancybox script, prevent the auto-resize using the API option fitToView: false .... then catch every video's dimensions using the afterLoad callback.

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

Your full fancybox custom script should look like :

$(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

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

... notice that we added controlbar=over in the string value of the object this.content. Also notice that we are not using the .click() method but binding fancybox directly to the selector .video. Additionally, we don't actually need 'title' : this.title or 'type' :'swf' either so I remove them.

演示? ... 在此处查看

Demo ? ... see it here

这篇关于Fancybox中的JW Player.无法隐藏控制栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！