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