隐藏元素在某些时间YouTube API

Hide element on certrain time YouTube API

本文关键字：时间 YouTube API 元素 隐藏      更新时间：2023-09-26

我正在使用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秒隐藏它。但是当视频暂停时，计时器需要被清除，这样事件就不会被触发。

提前感谢!

我想我自己弄明白了。也许它可以帮助别人。

在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';
}    
})();
相关文章：