jquery - 未捕获的类型错误：无法读取 l 处未定义的属性“就绪”（froogaloop2.min.js?ver=4.8.3:1）

Question

我已经在悬停时实现了 Vimeo 视频，它工作正常，但面临的问题是，每当我将鼠标悬停在该 div 上时，视频正在正常播放，但当我将鼠标悬停在该 div 之外时它不会暂停（mouseout）。

请找到下面的Js代码：

$(document).on('mouseenter','.play-video',function(e){
        e.preventDefault();

        var videoUrl = $(this).attr('href');
        //alert(videoUrl);
        $('#videoBox_'+videoUrl).show();
        $(this).next('#videoBox_'+videoUrl).html('<iframe id="player_'+videoUrl+'" src="http://player.vimeo.com/video/' + videoUrl + '?api=1&amp;player_id=player_'+videoUrl+'&autoplay=1" frameborder="0" allowfullscreen></iframe>');
        var player = $("#player_"+videoUrl);
        //console.log(player[0].id);
        player.mouseover(function(){
            froogaloop = $f(player[0].id);
            froogaloop.api('play');
        });

        player.mouseout(function(){
            froogaloop = $f(player[0].id);
            froogaloop.api('pause');
        });
    });

我在控制台上遇到错误：

Answer 1

我想为这种情况提出另一种选择。为了播放/暂停某些 vimeo 视频剪辑，我们可以调整一些给定的代码，如下所示：

示例参考代码：

$(document).ready(function() {

    // 1) Assign a given variable called oPlayer
    var oPlayer = undefined;

    $('.container .item').on('mouseenter', '.play-video', function(e) {
        e.preventDefault();

        // 2) When user hover the hovered [iframe], The oPlayer
        // will now be assigned to that given [iframe] element
        oPlayer = $(this);
        froogaloop = $f(oPlayer[0].id);
        froogaloop.api('play');

   }).mouseleave(function() {

        // 3) So by the time the user leaves that
        // iframe, It will pause that given [iframe]
        froogaloop = $f(oPlayer[0].id);
        froogaloop.api('pause');
    });
});

这是一个 jsfiddle 供进一步参考：https ://jsfiddle.net/85dLbt2u/5/

希望这对您给定的案例有所帮助。