在特定时间隐藏元素 YouTube API

Question

我正在使用 YouTube API 并设法在特定时间触发了一个事件。但现在我想在几秒钟后隐藏触发事件。因此，例如 div 在 4 秒时显示，我想在 6 秒时隐藏它。但我无法让它发挥作用。我可以让 div 在 4 秒时显示并在 6 秒时隐藏，但即使视频暂停，计时器也会继续跟踪时间。所以我做错了什么。

这里是一个JSFiddle代码（脚本不是我自己的，我只是在网上找到它并稍微修改了一下）

HTML:

<div id="player"></div>
<div id="showTest">Test</div>

Javascript:

document.getElementById('showTest').style.display = 'none';

(function() {
  var showText1 = 4, // Stop play at time in seconds
  showTextTimer;   // Reference to settimeout call

  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement("script");
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // This function creates an <iframe> (and YouTube player)
  // after the API code downloads.
  var player;
  window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player("player", {
      "height": "315",
      "width": "560",
      "videoId": "L6cVcbkx8l8",
      "events": {
      "onReady": onPlayerReady,
      "onStateChange": onPlayerStateChange
   }
});
}

// The API will call this function when the video player is ready.
// This automatically starts the video playback when the player is loaded.
function onPlayerReady(event) {
event.target.playVideo();
}
// The API calls this function when the player's state changes.
  function onPlayerStateChange(event) {
  var time, rate, remainingTime;
  clearTimeout(showTextTimer);
  if (event.data == YT.PlayerState.PLAYING) {
  time = player.getCurrentTime();
  // Add .4 of a second to the time in case it's close to the current time
  // (The API kept returning ~9.7 when hitting play after stopping at 10s)
  if (time + .4 < showText1) {
    rate = player.getPlaybackRate();
    remainingTime = (showText1 - time) / rate;
    showTextTimer = setTimeout(showTxt, remainingTime * 1000);
  }   
}
}
function showTxt() {
document.getElementById('showTest').style.display = 'block';
}
})();

所以总而言之，我想在 4 秒时显示 div 并在 6 秒时隐藏它。但是当视频暂停时，定时器需要被清除，这样事件就不会被触发。

提前致谢！

Answer 1

我想我自己想出来了。也许它可以帮助其他人。

在 else 中，每个计时器都需要被清除。

这里是 JSFIDDLE.

document.getElementById('showTest').style.display = 'none';

(function() {
var showText1 = 4, // Stop play at time in seconds
    showTextTimer;   // Reference to settimeout call
var hideText1 = 6, // Stop play at time in seconds
    hideTextTimer;   // Reference to settimeout call    

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
window.onYouTubeIframeAPIReady = function() {
  player = new YT.Player("player", {
    "height": "315",
    "width": "560",
    "videoId": "L6cVcbkx8l8",
    "events": {
    "onReady": onPlayerReady,
    "onStateChange": onPlayerStateChange
  }
});
}

// The API will call this function when the video player is ready.
// This automatically starts the video playback when the player is loaded.
function onPlayerReady(event) {
  event.target.playVideo();
}

// The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
  var time, rate, remainingTime, remainingTime2;
  if (event.data == YT.PlayerState.PLAYING) {
    time = player.getCurrentTime();
    rate = player.getPlaybackRate();  
    // Add .4 of a second to the time in case it's close to the current time
    // (The API kept returning ~9.7 when hitting play after stopping at 10s)
    if (time + .4 < showText1) {
      remainingTime = (showText1 - time) / rate;
      showTextTimer = setTimeout(showTxt, remainingTime * 1000);
    }
    if (time + .4 < hideText1) {
      remainingTime2 = (hideText1 - time) / rate;
      hideTextTimer = setTimeout(hideTxt, remainingTime2 * 1000);
    }          
  }
  else {
        clearTimeout(showTextTimer);
        clearTimeout(hideTextTimer);
  }
}
function showTxt() {
  document.getElementById('showTest').style.display = 'block';
}
function hideTxt() {
  document.getElementById('showTest').style.display = 'none';
}    
})();

在特定时间隐藏元素 YouTube API

Hide element on certrain time YouTube API

html

javascript

youtube

triggers

timestamp