Question

我已经检查了其他关于此问题的线索，但无法找到我想要的东西。

我在 iFrame 表单中嵌入了 YouTube 视频。它设置为自动循环。这是参数：

?showinfo=0&rel=0&autoplay=1&loop=1&controls=0&playlist=SeFzUzde5BM

问题是在视频开始之前，有一个带有加载栏的黑屏。这本身并不算太差，但是当视频进入循环时，它又会这样做！为什么需要加载两次？反正是否有无缝循环，没有加载屏幕打破每个循环？

Answer 1

您的问题似乎在这里得到解答：

YouTube embedded video auto loop without refresh screen

但是，如果该链接不可用，则答案是使用Youtube Embed Api代码。称为player.getPlayerState()。您基本上检查视频是否已“结束”，然后运行.playVideo();功能。它会立即重新开始。

Youtube API : focused on Playback Status

我将此“if”语句添加到Youtube API页面顶部提供的代码中。

if (event.data === YT.PlayerState.ENDED) {
        player.playVideo(); 
    }

注意：正如您所看到的，您必须首先将其设置为单独的脚本，而不是在html中将其设置为内联（它更容易跟踪）。我建议查看上面链接的YouTube API以获得额外帮助。

Answer 2

Jimmy的解决方案看起来不错。我最终使用了一个HTML视频播放器，但是如果有人好奇的话，这就是我在使用iframe时为我工作的解决方案。

我必须知道视频的时间（15s）并将其设置为循环.1s之前（14.9s）。否则，有一点点＆＃34; blip＆＃34;影响。我用间隔来不断检查时间。如果有一种方法可以在视频结束前动态连接到0.1s点，我建议，但我无法找到。我也使用了一点淡化效果，因此过渡更顺畅。

＆＃13;

<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', {
          height: '390',
          width: '640',
          videoId: YOUR_ID_HERE,
          playerVars: {
            controls: 0,
            showinfo:0,
            rel:0,
          },
          events: {
            'onReady': onPlayerReady,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();

        var interval_is_stopped = false;
        setInterval(function (){
          var current_time = event.target.getCurrentTime();

          if (current_time > 14.9 && !interval_is_stopped) {
            interval_is_stopped = true;
            jQuery('#player').fadeTo(400, 0.7, function(){
              player.seekTo(0);
              jQuery(this).fadeTo(400, 1, function(){
                interval_is_stopped = false;
              });
            });
          }
        }, 10);

      }

    </script>

＆＃13;

从YouTube嵌入循环视频移除黑色加载屏幕

2 个答案: