Javascript 在mouseleave上暂停YouTube视频

我创建了一个函数，当用户将鼠标悬停在div上时插入YouTube iframe，然后当鼠标离开div时，视频暂停。一切正常，但视频仅在第一次暂停，当您再次单击“播放”，然后离开div时，视频不会暂停。有什么想法吗？谢谢

小提琴：

---

控制台里有什么吗？重新单击时出错？是：TypeError:player.pauseVideo不是一个函数@jeremyd当您在控制台中键入player时有什么功能？也许你触发pauseVideo电话太早了。通过打印/添加断点来检查状态如何转换。我得到一个对象。我认为不再有mouseleave了——因为不再有mouseenter了——iframe完全覆盖了上一个div，因此你永远不会进入它，所以你不能离开它。该对象的原型是否包含与youtube/player相关的内容？问题可能是，您的事件处理出现了问题。

var tag = document.createElement('script'),
    firstScriptTag = document.getElementsByTagName('script')[0];

tag.src = "https://www.youtube.com/player_api";
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
$(".video_wrap").on({
    mouseenter: function () {

        player = new YT.Player($(this).children().attr('id'), {
            height: '240',
            width: '320',
            videoId: '-NschES-8e0',
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady
            }
        });

        function onPlayerReady(event) {
            player.setVolume(10);
            event.target.playVideo();
        }


    },
    mouseleave: function () {
        player.pauseVideo();

    }
});