Question

我正在创建一个功能，当用户将鼠标悬停在div上时插入YouTube iframe然后when the user leaves div the video is paused. Everythings工作正常但是当用户离开div时视频不会暂停。

小提琴：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。

之后不起作用的原因是因为不再有鼠标 - 因为不再有鼠标中心 - iframe完全覆盖了前一个div，因此你永远不会输入它，所以你不能离开它。

你想使用mouseout。

鼠标离开时暂停YouTube视频

1 个答案: