使用JavaScript API淡入淡出Youtube视频

问题描述：

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

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>

答

试试这个

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

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

这个工作，但现在我坚持在右下角的YouTube水印。我尝试将modestbranding设置为1，并在playerVars中将showinfo设置为0。另外，使用iframe比div更好吗？ –

您正在使用未与Youtube API连接的iframe。基本上YT Api为你创建iframe。你给构造函数的第一个参数是iframe的id。 –

好的，谢谢。但是，您知道如何摆脱YouTube水印吗？我还需要摆脱它最终创建的静止图像，或者在它发生之前淡出它。 –

使用JavaScript API淡入淡出Youtube视频

相关推荐