Question

我正在尝试在视频开始时淡入包含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>

Answer 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文字标签仍会显示在暂停视频的右上角。

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

1 个答案: