从 YouTube 嵌入循环视频中删除黑色加载屏幕答案

【问题标题】：Remove black loading screen from YouTube embed looped video从 YouTube 嵌入循环视频中删除黑色加载屏幕
【发布时间】：2018-07-17 01:18:37
【问题描述】：

我已经查看了有关此的其他线程，但无法真正找到我所追求的。

我以 iFrame 形式嵌入了一个 YouTube 视频。它设置为自动循环。参数如下：

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

问题是在视频开始之前，有一个带有加载栏的黑屏。这本身并不算太糟糕，但是当视频循环播放时，它又会这样做！为什么它需要自己加载两次？无论如何让它无缝循环，而加载屏幕不会破坏每个循环？

【问题讨论】：

请看相关帖子stackoverflow.com/questions/46635316/…

标签： html iframe youtube

【解决方案1】：

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

YouTube embedded video auto loop without refresh screen

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

Youtube API : focused on Playback Status

我在 Youtube API 页面顶部提供的代码中添加了这个“if”语句。

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

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
只是想帮忙。如果它实现了我很高兴。谢谢你的编辑大卫'我明白你的意思了..如果网址发生变化。
谢谢吉米。我最终使用了一个 HTML 播放器，但我刚刚发布了最终为我工作的内容，使用 iFrame。你的方法的问题是它有时会在最后创建一个“光点”，具体取决于视频。

【解决方案2】：

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

我必须知道视频的时间（15 秒）并在此之前将其设置为循环 0.1 秒（14.9 秒）。否则，会有一点“昙花一现”的效果。我用一个间隔来不断地检查时间。如果有办法在视频结束前动态挂钩到 0.1s 点，我建议这样做，但我找不到。我还使用了一点淡入淡出效果，以便过渡更平滑。

<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>

【讨论】：