关闭fancybox后，flowplayer再次播放视频

Question

我正在使用jquery将带有流媒体皮肤的视频放入我页面中隐藏的div中，以便在fancybox中播放

$("a.videoLink").click(function(){
    var videoFile = "products_video/" + $(this).attr("videofile");
    var videoPoster = $(this).attr("videofile");
var videoCode = '<a href='+videoFile+' id="player" style="display:block;width:600px;height:400px;"></a><script language="JavaScript">flowplayer("player", "flowplayer-3.2.7.swf")</script>';
    $("#videoPlayer").html(videoCode);
    $.fancybox({
        'transitionIn' : 'fade',
        'transitionOut' : 'fade',
        'href' : '#videoPlayer'
        });
    });

这是隐藏的div

<div style="display: none;">
<div id="videoPlayer"></div>
</div>

当我点击视频的任何图像时，它开始在fancybox中播放但问题是当我关闭fancybox视频时从隐藏的div开始播放 如果fancybox关闭，如何停止视频？

Answer 1

因为脚本中的API选项，我假设你使用的是fnacybox v1.3.x，不是吗？

这里发生的事情是fancybox 将内联内容移动 到fancybox容器中，并将temp容器留在隐藏的DIV内。然后你的视频开始在模态框内播放。

当您关闭fancybox时，会移除temp容器， 将内容从 进入内联隐藏DIV，所以你的视频会在那里重新开始播放（就像它移动到fancybox一样）。

要解决此问题，请尝试将这两个选项添加到您的fancybox脚本中：

'onClosed': function() {
 $("#videoPlayer").empty();
},
'onCleanup': function() {
 var myContent = this.href;
 $(myContent).unwrap();
}

第一个选项会从隐藏的内嵌内容中删除视频（因此后台不再显示视频），第二个选项会在处理内联内容时修复错误described here。

因此fancybox脚本的部分应如下所示：

// videoCode script here etc
$.fancybox({
 'transitionIn' : 'fade',
 'transitionOut' : 'fade',
 'href' : '#videoPlayer',
 'onClosed': function() {
  $("#videoPlayer").empty();
 },
 'onCleanup': function() {
  var myContent = this.href;
  $(myContent).unwrap();
 } 
}); // fancybox
// close click and ready etc