Javascript vimeo视频完成后关闭弹出窗口

我已经实现了一个小脚本，当vimeo视频使用froogaloop结束时关闭放大弹出窗口

这是我的代码：

var SlampLightbox = (function(undefined){

    var mp; //store Magnific Popup global object

    var mp_exixts = function(){
        if( $.fn.magnificPopup ){
            mp = $.magnificPopup.instance
            return true;
        }else{
            return false;
        }
    }

    var open_from_hash = function(){
        var hash = window.location.hash.slice(1); //cache hash

        if( hash.length  > 1 && hash != '#!'){
            var mark_pos = hash.indexOf('?');
            if( mark_pos != -1)
                hash = hash.substring(0, mark_pos);

            var selector = 'a[name='+hash+']';
            $(selector).click(); //trigger click event on the element to open magnificPopup

         }
    }

    var open = function($element){
        $element.magnificPopup({
            delegate: 'a',
            type: 'iframe',
            tLoading: '',
            iframe: {
              markup: '<div class="slamp-mfp-iframe-scaler">'+
                        '<button title="Close (Esc)" type="button" class="slamp-mfp-close">x</button>'+
                        '<iframe id="vimeoplayer" class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                      '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
     patterns: {
       vimeo:{
          index: 'vimeo.com/',
          id: '/',
          src: '//player.vimeo.com/video/%id%?autoplay=1&api=1&player_id=vimeoplayer'
       }
     }
            },
            callbacks: {
                markupParse: function(template, values, item) {

        _attachVideoEvent(template, values, item);


                }

            }
        })
    }

    var _close = function(){
        mp.close();
    }

var _attachVideoEvent = function(template, values, item){

    var playerOrigin = '*';
    var player = $f( template.find("iframe")[0] );

    if( player.length == 0 )
    return;

    var onFinish = function(){
        _close();
    }

    player.addEvent('ready', function() {
        player.addEvent('finish', onFinish);
    });



  }

    return {
        init: function($element){//input must be a jQuery object

            if( mp_exixts() ){
                open($element);

                if( $element.length == 0)
                    return;

                open_from_hash(); //open a video specified in the hash, if any

                $(document.body).on('click', '.slamp-mfp-close', _close);
            }else{
                console.error("MagnificPopup doesn't exists");
                return false;
            }

            },
        mp: mp
    }
})(undefined);
window.SlampLightbox = SlampLightbox; //global function

但它只工作一次，因为我第二次点击img时，我得到一个

javascript错误：

http://codepen.io/anon/pen/oxZpPL

VM983 froogaloop2.min.js:1未捕获类型错误：无法读取属性 null的“postMessage”

但我不明白为什么，是我的错？哦，一只青蛙？ 请帮助我理解

谢谢

试试这个；）

在这里，当我们附加

\u attachVideoEvent

时，它会执行一些

postMessage

操作，抛出错误，JavaScript执行中断；我们已经延迟了这个绑定，以便弹出打开，然后我们做绑定的事情。它仍然抛出错误，但没有问题

/**
*lightbox中打开元素的JS模块
*
*@dependencies放大弹出窗口
**/
var SlampLightbox=（函数（未定义）{
var mp；//存储放大弹出全局对象
var mp_exixts=函数（）{
如果（$.fn.magnificPopup）{
mp=$.magnificpoop.instance
返回true；
}否则{
返回false；
}
}
var open_from_hash=函数（）{
var hash=window.location.hash.slice（1）；//缓存哈希
如果（hash.length>1&&hash！='#！'）{
var-mark_pos=hash.indexOf（'？'）；
如果（标记位置！=-1）
hash=hash.substring（0，标记位置）；
变量选择器='a[name='+hash+']'；
$（选择器）.click（）；//触发元素上的click事件以打开放大弹出窗口
}
}
var open=函数（$element）{
$element.magnificPopup({
代表：“a”，
键入：“iframe”，
t加载：“”，
iframe：{
标记：“”+
“x”+
'' +
“”，//弹出窗口的HTML标记，`mfp close`将替换为close按钮
模式：{
维梅奥：{
索引：“vimeo.com/”，
id:“/”，
src:“//player.vimeo.com/video/%id%？autoplay=1&api=1&player\u id=vimeoplayer”
}
}
},
回调：{
/*
beforeOpen:函数（）{
$（窗口）.on（“导航”，函数（事件、数据）{
变量方向=data.state.direction；
控制台日志（方向）；
如果（方向==‘返回’）{
$.magnificPopup.close（）；
}
});
},
*/
markupParse：函数（模板、值、项）{
setTimeout（函数（）{
_attachVideoEvent（模板、值、项目）；
});
},
elementParse:函数（项）{
var$item=item.el；//打开的jQuery对象
if（$item.hasClass（“video thumb”）{//google analytics跟踪事件
var video_name=$item.attr（“name”）；
if（history.pushState）
history.pushState（null，null，“#”+视频名称）；
其他的
location.replace（“”+window.location）.split（‘#’）[0]+‘#’+video_name）；
如果（ga的类型！=“未定义”）
ga（“发送”、“事件”、“灯箱打开”、“视频页面”、“视频名称”）；
}
},
关闭：函数（）{
if（window.location.hash！=''）{
if（history.pushState）
history.pushState（null，null，#！'）；
其他的
location.replace（“”+window.location）.split（‘#’）[0]+‘#！’）；
}
}
}
})
}
var_close=函数（）{
mp.close（）；
}
var\u attachVideoEvent=函数（模板、值、项）{
变量playerOrigin='*'；
var player=$f（template.find（“iframe”）[0]）；
如果（player.length==0）
返回；
var onFinish=函数（）{
_close（）；
}
player.addEvent（'ready'，function（）{
player.addEvent（'finish'，onFinish）；
});
}
返回{
init:function（$element）{//input必须是jQuery对象
if（mp_exits（））{
开放式（$要素）；
如果（$element.length==0）
返回；
open_from_hash（）；//打开散列中指定的视频（如果有）
$（document.body）.on（'click'，'slamp mfp close'，_close）；
}否则{
错误（“放大弹出窗口不存在”）；
返回false；
}
},
议员：议员
}
})（未定义）；
window.slamlightbox=slamlightbox//全局函数
$（文档）.ready（函数（）{
SlampLightbox.init（$（'.video_header'）；
});
您好，谢谢您的支持，它很有效！但是我没有使用setTimeout，而是将事件附加到放大弹出窗口的打开回调。我不知道你是否能再次帮助我，但现在我注意到在chrome mobile上，弹出窗口自动关闭后，我无法再滚动。您也可以在chrome inspector中使用设备模式进行测试