关闭 fancybox 后 flowplayer 再次播放视频

发布于 2025-01-05 18:12:56 字数 871 浏览 5 评论 0原文

我正在使用 jquery 将带有 flowplayer 皮肤的视频放置在页面的隐藏 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 关闭，如何停止视频？

原文

i'm using jquery to place video with flowplayer skin in a hidden div in my page to make it play in 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'
        });
    });

this is the hidden div

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

when i click any of the images of the video it starts playing in fancybox but the problem is when i close the fancybox video starts playing from the beginning in the hidden div
how to stop the video if the fancybox is closed?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不回头走下去 2025-01-12 18:12:56

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

这里发生的情况是，fancybox 将内联内容移动到 fancybox 容器中，并在隐藏的 DIVtemp 容器。代码> 代替。然后您的视频开始在模式框中播放。

当您关闭 fancybox 时，它会删除 temp 容器，并将内容从 fancybox 容器移回到内联隐藏的 DIV，这样您的视频就会再次开始播放（就像移动到 fancybox 中一样）。

作为解决方法，请尝试将这两个选项添加到您的 fancybox 脚本中：

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

第一个选项从隐藏的内联内容中删除视频（因此后台不再有视频），第二个选项修复错误此处描述了处理内嵌内容时的情况。

所以 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

Because the API options in your script, I assume you are using fnacybox v1.3.x, aren't you?

What is happening here is that fancybox moves the inline content into the fancybox container and leaves a temp container inside the hidden DIV instead. Then your video starts playing inside the modal box.

When you close fancybox, it removes the temp container and moves back the content from the fancybox container into the inline hidden DIV, so your video starts playing again there (as it did when it was moved into fancybox).

As a workaround, try adding these two options to your fancybox script:

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

The first option removes the video from the hidden inline content (so no more video in the background) and the second option fixes a bug described here when working with inline content.

So the part of the fancybox script should look like:

// 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

回复收藏 0 原文

~没有更多了~