Question

所以，我所寻求的是在上下文中很简单，但实施起来很有挑战性。

我希望在用户单击播放按钮然后单击暂停按钮之前禁用悬停功能。

所以，基本上我希望滑块的鼠标悬停功能无效，直到用户点击取消静音按钮（播放Youtube按钮）然后单击静音按钮（暂停YT按钮）。如果你转到JSFiddle，你会看到，在加载时，如果你的鼠标悬停在滑块上然后徘徊......滑块移动（6秒后）。我不希望滑块在用户启动Youtube视频之前启动。

var W = $('#image_rotator').width(),
N = $('#slider .slide').length,
C = 0,
S = 0,
intv;

if (N <= 1) $('#left, #right').hide();
$('#slider').width(W * N);

$('#left, #right').click(function () {
C = (this.id == 'right' ? ++C : --C) < 0 ? N - 1 : C % N;
$('#slider').stop().animate({
    left: -C * W
}, 300, function () {
    if (C == 0) {
        $('#playiunmute').show();
    }
    if (C == 1) {
        $('#left').show();
    }
    if (C == 1) {
        $('#right').show();
    }
    if (C == 1) {
        $('#playiunmute').hide();
    }
    if (C == 10) {
        $('#slider').css("left", "0");
        $('#right').click();
    }
});
});


function setResetInterval(e) {

var intv = $("#slider");
if (e) {
    timer = setInterval(function () {
        $('#right').click();
    }, 6000);
 } else {
    clearInterval(timer);
 }
 }


 $("#imute").click(function (e) {
  e.preventDefault();
  setResetInterval(true);
  S = 0;
 });
 $("#iunmute").click(function (e) {
  e.preventDefault();
  setResetInterval(false);
  S = 1;
});
$("#playiunmute").click(function (e) {
e.preventDefault();
setResetInterval(false);
S = 1;
});
$('#slider, #left, #right, #playiunmute').hover(function (e) {
    return (e.type == 'mouseleave' && S != 1) ? setResetInterval(true) :    setResetInterval(false);
});


 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;

 function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
    height: '460',
    width: '1190',
    controls: 1,
    videoId: 'kDUERmuuogo',
    playerVars: {
        controls: 0,
        showinfo: 0,
        modestbranding: 1,
        wmode: "opaque",
        rel: 0
    },
    events: {
        'onReady': onPlayerReady
    }
 });
 }

function onPlayerReady(event) {
player.mute();
event.target.playVideo();
event.target.setPlaybackQuality("hd720");
}



document.getElementById('iunmute').onclick = function (e) {
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
player.playVideo();
player.seekTo(0);
};

document.getElementById('imute').onclick = function (e) {
player.mute();
player.pauseVideo();
};

document.getElementById('playiunmute').onclick = function (e) {
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
player.playVideo();
};

$('#iunmute').click(function () {
$('#imute').show();
});
$('#iunmute').click(function () {
$('#iunmute').hide();
});
$('#imute').click(function () {
$('#playiunmute').show();
});
$('#imute').click(function () {
$('#imute').hide();
});
$('#playiunmute').click(function () {
$('#imute').show();
});
$('#playiunmute').click(function () {
$('#playiunmute').hide();
});
$('#iunmute').click(function () {
$('#left').hide();
});
$('#iunmute').click(function () {
$('#right').hide();
});
$('#playiunmute').click(function () {
$('#left').hide();
});
$('#playiunmute').click(function () {
$('#right').hide();
});

Answer 1

我有一种感觉，你的初步问题（Trigger Alert When Slider Moves Left A Certain Amount）会让我感到烦恼，直到我弄清楚如何使这项工作，我是对的！我坐下来想出了一种妥协解决方案。为了使它工作，我已经取消了你添加的暂停按钮，而不是普通的YouTube播放器控件，因为我可以将监听器附加到它们，这导致更短，更易于理解的代码。我对此进行了彻底的测试，它应该完全符合您的要求：视频暂停（或静音;我不确定您是否也想要此功能，尽管您将静音按钮与YouTube相比较＃39;问题中的播放/暂停按钮，仍然是静音按钮。），视频将停止，滑块将前进到下一张幻灯片。当间隔（或用户手动推进幻灯片）最终导致滑块返回视频时，视频将从头开始再次播放，并且间隔将被取消，这样播放器将超越该播放器的唯一方式视频将供用户静音视频。如果您不希望视频从头开始，则可以删除player.seekTo(0);处理程序中的行$("#left, #right").click()。如果您不希望静音按钮导致幻灯片更改，请删除以下间隔功能：

window.setInterval(function(){
if(player.isMuted()) {
    player.pauseVideo();
}}, 100);

以及player.unMute();处理程序中的$("#left, #right").click()行。

以下是我修改/添加的部分代码。我只添加了这一部分，以防止我的答案变得比它必须的更长（就答案而言，它已经在较长的一侧）。完整的代码在小提琴中可见。

function onPlayerReady() {
    player.playVideo();
    player.unMute();
    player.setPlaybackQuality("hd720");
    window.setInterval(function(){
    if(player.isMuted()) {
        player.pauseVideo();
    }}, 100);
}

function onPlayerStateChange() {
    if (player.getPlayerState() == 2) {
        $("#right").click();
    }
}

我希望这是你正在寻找的东西！

http://jsfiddle.net/IronFlare/6o6kL8pf/2/

如果您有任何疑问，请随时在此答案中添加评论。

JQuery Slider帮助 - 鼠标悬停事件解决方案

1 个答案: