Question

我正在使用YouTube iFrame API嵌入多个视频。我设置了一个时间间隔，以获取视频的当前时间，并在视频被点击后关闭播放器。满足此条件后，我将触发一个单击关闭图标的操作，该图标应可清除间隔和其他功能。

当我在视频播放结束前关闭视频时，此功能有效。但是，当我满足上述条件时触发相同的功能时，该间隔将永远不会清除/似乎再次被调用。

代码：

// Call on the YouTube iFrame API.
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 scrubberUpdate;

// Setup our player.
onYouTubeIframeAPIReady = function() {
    ytPlayer = new YT.Player(ytPlayerTarget, {
        width: '100%',
        playerVars: {
          'autohide': 1,
          'autoplay': 1,
          'cc_load_policy': 0,
          'controls': 1,
          'disablekb': 0,
          'end': 0,
          'wmode': 'transparent',
          'fs': 1,
          'loop': 0,
          'html5': 1,
          'playsinline': 1,
          'rel': 0,
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
};

function closeFunc() {
    clearInterval(scrubberUpdate);
    ytPlayer.pauseVideo();
    ytPlayerCloseBtn.add(ytPlayerContainer).hide();
    ytPlayerWrapper.removeClass('playing').fadeOut();
}

function closeThePlayerOverlay() {
    ytPlayerCloseBtn.on('click', function() {
        closeFunc();
    });
}

function scrubberWidthCalc() {
    var ytPlayerDuration = ytPlayer.getDuration();
    var ytPlayerCustomEndTime = ytPlayerDuration - 0.2;
    var ytPlayerCurrentTime = ytPlayer.getCurrentTime();
    ytPlayerScrubber.css({
      'width': (ytPlayerCurrentTime / ytPlayerDuration) * 100 + '%'
    });
    if (ytPlayerCurrentTime > ytPlayerCustomEndTime) {
      ytPlayerCloseBtn.trigger('click');
    }
}

function scrubberWidth() {
    // console.log('scrubberUpdate');
    scrubberUpdate = setInterval(function() {
        scrubberWidthCalc();
    }, 10);
}

function loadVideo(theSource) {
    ytPlayer.loadVideoById(theSource, 0, 'default');
    ytPlayer.playVideo();
    scrubberWidth();
}

function triggerVideoPlayback() {
    ytPlayerTrigger.on('click', function() {
        var $this = $(this);
        var theSource = $this.data('yt-dynamic-src');
        handleInline($this);
        if (ytPlayerWrapper.hasClass('playing')) {
          ytPlayer.pauseVideo();
          loadVideo(theSource);
        } else {
          openThePlayerOverlay();
          loadVideo(theSource);
        }
      });
}

function onPlayerReady() {
    playPauseFun();
    closeThePlayerOverlay();
    handleFullscreen();
    triggerVideoPlayback();
}

在视频播放/暂停期间单击“ ytPlayerCloseBtn”时，它可以正常工作并清除间隔。

当单击由条件（if (ytPlayerCurrentTime > ytPlayerCustomEndTime)...）触发时，它不会清除间隔。我的控制台日志继续运行。

我已经对此进行了许多尝试，但是看不到为什么clearInterval在这种情况下不起作用！

条件为真时清除setInterval的问题

0 个答案: