jquery - 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样式，因为这可能会造成混淆。