Question

我正在使用JQuery Reveal插件取得了很好的成功，可以通过简单的Flash回退来展示HTML5视频。 Reveal在IE8，IE9，Firefox，Chrome，Safari，Win XP，Win 7，OS X，iPad 2和Android 2.3上运行良好。

它仅用于显示视频，并且在一页上显示许多视频时也能正常工作。

我在模态窗口中有一个“关闭”链接，与Esc键和单击背景一样。但是。。。我只能通过在HTML页面中添加以下脚本来找到如何暂停关闭链接的已关闭视频

$('.close-reveal-modal').click(function() {
    $('video, audio').each(function() {
        $(this)[0].pause();    
    });
});

如何添加代码以使其暂停Esc键和背景点击的视频？

当视频窗口被取消时，暂停视频会阻止它继续播放，这就是我需要做的事情。

显然，我甚至不是JavaScript中的n00b，因为我查看了相关的jquery.reveal.js文件并查看了所有结束事件，但却不知道如何将其添加进去（大声笑，很多事情都在突破它它完全或不影响任何变化！）。

谢谢！

http://subquark.com/html5/lightbox/course.htm当前测试样本

Answer 1

我刚才遇到了同样的问题，并想出了编辑源代码的位置。在文件jquery.reveal.js中，第95-124行：

  modal.bind('reveal:close', function () {
    if(!locked) {
        lockModal();
        if(options.animation == "fadeAndPop") {
            modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
            modal.animate({
                "top":  $(document).scrollTop()-topOffset + 'px',
                "opacity" : 0
            }, options.animationspeed/2, function() {
                modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                unlockModal();
            });                 
        }   
        if(options.animation == "fade") {
            modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
            modal.animate({
                "opacity" : 0
            }, options.animationspeed, function() {
                modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
                unlockModal();
            });                 
        }   
        if(options.animation == "none") {
            modal.css({'visibility' : 'hidden', 'top' : topMeasure});
            modalBG.css({'display' : 'none'});  
        }       
    }
    //ADD YOUR EXTRA EVENTS HERE!
    modal.unbind('reveal:close');
  });

在我标记的位置添加您的额外代码（最后）。

希望这有帮助！

Answer 2

我刚刚为使用YouTube iframe的网站修改了类似内容，以便在灯箱中显示视频。我改变了代码：

  modal.bind('reveal:close', function () {
    if(!locked) {
        lockModal();
        if(options.animation == "fadeAndPop") {

到此：

  modal.bind('reveal:close', function () {
    if(!locked) {
        lockModal();
        modal.children('iframe').remove(); // Remove iframes.
        if(options.animation == "fadeAndPop") {

这解决了我在Chrome中仍然可见的问题，并停止播放视频。

JQuery ZURB Reveal插件 - 在任何关闭方法上停止视频

2 个答案: