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样式，因为这可能会令人困惑。

Youtube视频结束淡出

1 个答案: