javascript - 鼠标离开时暂停 YouTube 视频

Question

我正在创建一个函数，当用户将鼠标悬停在 div 上时插入 YouTube iframe，然后当用户离开 div 时视频暂停。 一切正常，但当用户离开时视频不会暂停分区。

fiddle :http://jsfiddle.net/508oknm7/20/

有什么想法吗？谢谢!

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).attr('id'), {
            height: '240',
            width: '320',
            videoId: 'wJnnT1SGEsc',
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });

        function onPlayerReady(event) {
            event.target.playVideo();
        }


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

Answer 1

API 可能尚未准备好 - 根据 the youtube Iframe API ，需要实现onYoutubeIframeAPIReady函数。

试试这个:

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;
function onYouTubeIframeAPIReady(){
$(".video_wrap").on({
    mouseenter: function () {

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

        function onPlayerReady(event) {
            event.target.playVideo();
        }


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

请注意，这只是一个有根据的猜测，但如果您想要更具体的东西，您可以提供一个 jsfiddle。

编辑:This works for the first time 。

之后它不起作用的原因是因为不再有 mouseleave - 因为不再有 mouseenter - iframe 完全覆盖了前一个 div，因此你永远不会进入它，所以你无法离开它。

您想为此使用 mouseout。