2

我正在使用 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当前测试样本

4

2 回答 2

0

我刚刚为使用 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") {

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

于 2012-11-21T18:49:25.230 回答
0

我刚刚遇到了同样的问题，并想出了在哪里编辑源代码。在文件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');
  });

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

希望这可以帮助！

于 2012-07-07T01:17:52.000 回答