2014-10-12 117 views
0

我试图让我的YouTube视频api帧在播放后淡出,但无法使其工作。它工作了一段时间,但我一定已经做了一些脚本来搞砸了。Youtube视频结束淡出

我试过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> 

回答

0

你在找什么是视频结束时由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样式,因为这可能会让人困惑。

+0

因此,我删除下面的所有内容onYouTubeIframeAPIReady()并放置你所说的内容?我在“真棒视频播放”中放入了什么? – 2014-10-12 13:59:59

+0

呃,没有。 onPlayerReady(event)不会干扰我所说的。这是您的自动播放功能。 你想要的是与之无关的东西。 您可以在onPLayerReady函数中单独使用onPLayerStateChange(event)。 但是真正简单的方法是在https://developers.google.com/youtube/iframe_api_reference?hl=nl复制功能代码然后在需要的地方更改。 – 2014-10-12 14:03:12

+0

对不起,但我不明白。我保留我已经拥有的代码并将你的东西放在底部?我需要播放状态吗? – 2014-10-12 14:10:51