使用JavaScript API淡入淡出Youtube视频_Javascript_Iframe_Youtube_Youtube Api

使用JavaScript API淡入淡出Youtube视频

javascript iframe youtube youtube-api

使用JavaScript API淡入淡出Youtube视频,javascript,iframe,youtube,youtube-api,Javascript,Iframe,Youtube,Youtube Api,我试图在视频开始时淡入包含YouTube视频的iframe，在视频结束时淡出（在它显示中间带有红色播放器按钮的静止图像之前）。现在，视频的不透明度为0。好像代码没有检测到视频的开始。这是我的代码（）： HTML } 我还尝试了document.getElementById（'player'）.style.opacity=1而不是event.target.style.opacity=1，但它仍然不会淡入视频新代码，感谢下面的帮助。然而，最后我还是得到了YouTube的水印和静止图像 <!D

我试图在视频开始时淡入包含YouTube视频的iframe，在视频结束时淡出（在它显示中间带有红色播放器按钮的静止图像之前）。现在，视频的不透明度为0。好像代码没有检测到视频的开始。这是我的代码（）：

HTML

}

我还尝试了

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>


#玩家{
显示：无；
}
//创建youtube播放器
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'0Bmhjf0rKe8'，
playerVars：{
第一,，
rel:0，
控件：0，
showinfo:0
},
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
//自动播放视频
函数onPlayerReady（事件）{
$（'#player'）.fadeIn（函数（）{
event.target.playVideo（）；
});
}
//视频结束时
函数onPlayerStateChange（事件）{
如果（event.data==0）{
$（“#播放器”）.fadeOut（）；
}
}
试试这个

#玩家{
显示：无；
}
//创建youtube播放器
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'0Bmhjf0rKe8'，
playerVars：{
品牌推广：1
},
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
//自动播放视频
函数onPlayerReady（事件）{
$（'#player'）.fadeIn（函数（）{
event.target.playVideo（）；
});
}
//视频结束时
函数onPlayerStateChange（事件）{
如果（event.data==0）{
$（“#播放器”）.fadeOut（）；
}
}

但是
无法删除水印
参考文献
品牌化：
此参数允许您使用不显示YouTube徽标的YouTube播放器。将参数值设置为1，以防止YouTube徽标显示在控制栏中请注意，当用户的鼠标指针悬停在播放器上时，暂停视频的右上角仍会显示一个小的YouTube文本标签。
这是可行的，但现在我被右下角的YouTube水印卡住了。我在PlayerBars中尝试将默认设置为1，将showinfo设置为0。另外，使用iframe不是比使用div更好吗？您使用的是一个不与Youtube API连接的iframe。基本上，ytapi为您创建iframe。您给构造函数的第一个参数是iframe的id。好的，谢谢。你知道如何去除YouTube上的水印吗？我还需要清除它在最后创建的静止图像，或者在它发生之前将其淡出。非常感谢，但不幸的是，我仍然得到了YouTube水印，因为我删除了控件。请查看我正在使用的PlayerBars的编辑问题。我还想在最后那张静止的图像出现之前淡出。是的，这也让我着迷。不幸的是，您无法使用Youtube api删除水印。他们只允许像以前一样使用嵌入的iframe。
#player{
opacity: 0;
transition: all 1s;

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

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