使用 JavaScript API 淡入和淡出 Youtube 视频答案

【问题标题】：Fade in and Out Youtube Video with JavaScript API使用 JavaScript API 淡入和淡出 Youtube 视频
【发布时间】：2016-08-03 16:31:44
【问题描述】：

我正在尝试在视频开始时淡入包含 YouTube 视频的 iframe，并在视频结束时淡出（在显示中间带有红色播放器按钮的静止图像之前）。现在，视频卡在不透明度：0。就像代码没有检测到视频的开始一样。这是我的代码（most of it is from Google）：

HTML

    <iframe id="player" 
        width="560" height="315" 
        src="https://www.youtube.com/embed/-K2fShrbvfY?modestbranding=1&rel=0&controls=0&enablejsapi" 
        frameborder="0" allowfullscreen
    ></iframe>

    <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', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.style.opacity = 1; 
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        event.target.style.opacity = 0; 
        setTimeout(stopVideo, 6000);
        done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

CSS

#player{
opacity: 0;
transition: all 1s;

}

我也尝试过 document.getElementById('player').style.opacity = 1; 而不是 event.target.style.opacity = 1; ，但它仍然没有淡入视频。

新代码，感谢下面的帮助。但是，我仍然得到 YouTube 水印和最后的静止图像。

<!DOCTYPE html>
<html>
  <head>
      <style>
          #player {
              display:  none;
          }
      </style>
  </head>
  <body>
      <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
      <div id="player"></div>

      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src="http://www.youtube.com/player_api"></script>

      <script>

          // create youtube player
          var player;
          function onYouTubePlayerAPIReady() {
              player = new YT.Player('player', {
                  height: '390',
                  width: '640',
                  videoId: '0Bmhjf0rKe8',
                  playerVars: {
                      modestbranding: 1,
                      rel: 0,
                      controls: 0,
                      showinfo: 0
                  },
                  events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                  }
              });
          }

          // autoplay video
          function onPlayerReady(event) {
              $('#player').fadeIn(function() {
                  event.target.playVideo();
              });
          }

          // when video ends
          function onPlayerStateChange(event) {        
              if (event.data === 0) {          
                  $('#player').fadeOut();
              }
          }

          </script>
      </body>
  </html>

【问题讨论】：

标签： javascript iframe youtube youtube-api

【解决方案1】：

试试这个

<!DOCTYPE html>
<html>
  <head>
      <style>
          #player {
              display:  none;
          }
      </style>
  </head>
  <body>
      <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
      <div id="player"></div>

      <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src="http://www.youtube.com/player_api"></script>

      <script>

          // create youtube player
          var player;
          function onYouTubePlayerAPIReady() {
              player = new YT.Player('player', {
                  height: '390',
                  width: '640',
                  videoId: '0Bmhjf0rKe8',
                  playerVars: {
                      modestbranding: 1
                  },
                  events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                  }
              });
          }

          // autoplay video
          function onPlayerReady(event) {
              $('#player').fadeIn(function() {
                  event.target.playVideo();
              });
          }

          // when video ends
          function onPlayerStateChange(event) {        
              if (event.data === 0) {          
                  $('#player').fadeOut();
              }
          }

          </script>
      </body>
  </html>

但是

您无法删除水印

参考YouTube API

谦虚的品牌： 此参数允许您使用不显示 YouTube 徽标的 YouTube 播放器。将参数值设置为 1 以防止 YouTube 徽标显示在控制栏中。 请注意，当用户的鼠标指针悬停在播放器上时，一个小的 YouTube 文本标签仍会显示在暂停视频的右上角。

【讨论】：

这可行，但现在我被右下角的 YouTube 水印卡住了。我尝试在 playerVars 中将moderatebranding 设置为 1 并将 showinfo 设置为 0。还有，用iframe不是比用div更好吗？
您使用的 iframe 未与 Youtube API 连接。基本上，YT Api 会为您创建 iframe。你给构造函数的第一个参数是 iframe 的 id。
好的，谢谢。不过，您知道如何摆脱 YouTube 水印吗？我还需要摆脱它在最后创建的静止图像，或者在它发生之前将其淡出。
非常感谢，但不幸的是我仍然得到 YouTube 水印，因为我删除了控件。对于我正在使用的 playerVars，请查看我编辑的问题。我还想在静止图像最后出现之前淡出。
是的，我也是。不幸的是，您无法使用 Youtube api 删除水印。他们只允许像您以前那样使用嵌入式 iframe。