Youtube视频结束淡出

Question

我正试图让我的youtube视频api帧在播放后淡出，但无法正常工作。它在一段时间前起了作用，但我一定对剧本做了什么，把它搞砸了。

我也试过document.getElementById("video").style.display = "none";，但没有用。我真的很想让它淡出。

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '480',
        width: '853',
        videoId: '7u-liW-xRE4',
        playerVars: { 
         'autoplay': 1,
         'showinfo': 0,
         'controls': 0, 
         'rel' : 0
  }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {        
    if(event.data === YT.PlayerState.ENDED) {          
        stopVideo();
    }
}
function stopVideo() {
    player.stopVideo();
    document.getElementById("video").fadeOut();
}
</script>

Answer 1

您要查找的是YT Api在视频结束时发送的事件。现在您正在发出结束视频的命令。这是两回事。试试这个：

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
         console.log('awesome video playing');      
    }
    if (event.data == YT.PlayerState.ENDED) {
        jQuery('your element').fadeTo('fast', 0).hide();
    }   
}

我建议您不要在代码中混合使用javascript和jquery样式，因为这可能会令人困惑。