我无法循环并将视频大小限制为 2 分钟答案

【问题标题】：I can't put a loop and limit the video size to 2 minutes我无法循环并将视频大小限制为 2 分钟
【发布时间】：2022-12-22 05:06:35
【问题描述】：

晚上好！我在论坛上得到了这段代码，它工作正常，但我无法为视频设置一个循环以一直重复 2 分钟的时间。当他在 2 分钟后到达时，他将回到起点。有人能帮我吗？

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
    </head>
  <body>
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

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

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: 'osz5tVY97dQ',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>
  </body>
</html>

【问题讨论】：

标签： javascript youtube-api

【解决方案1】：

感谢source，我修改了循环播放视频的代码。

此代码将在 4 秒后播放。

(function() {
  var stopPlayAt = 4, // Stop play at time in seconds - in this case, 4 seconds.
    stopPlayTimer; // 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": "xe-f4gokRBs",
      "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(stopPlayTimer);
    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 < stopPlayAt) {
        rate = player.getPlaybackRate();
        remainingTime = (stopPlayAt - time) / rate;
        stopPlayTimer = setTimeout(pauseVideo, remainingTime * 1000);
      }
    }
  }

  function pauseVideo() {
    player.stopVideo(); // Stops the video.
    player.playVideo(); // Plays the video from the beginning.
  }
})();

&lt;div id="player"&gt;&lt;/div&gt;

【讨论】：