隱藏的YouTube播放器失去其方法

我正在用javascript控制嵌入式YouTube無鉻播放器，我想通過設置display：none來偶爾隱藏它。但是，當我再次向玩家展示時，它會丟失其YouTube方法。隱藏的YouTube播放器失去其方法

例如：

<script> 
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=player", 
    "player", "425", "356", "8", null, null, 
    {allowScriptAccess: "always"}, {id: 'player'} 
); 

    var player = null; 

    function onYouTubePlayerReady(playerId) { 
    player = document.getElementById(playerId); 
    player.addEventListener('onStateChange', 'playerStateChanged'); 
    } 

    function hidePlayer() { 
    player.pauseVideo(); 
    player.style.display = 'none'; 
    } 
    function showPlayer() { 
    player.style.display = 'block'; 
    player.playVideo(); 
    } 
</script> 
<a href="#" onClick="hidePlayer();">hide</a> 
<a href="#" onClick="showPlayer();">show</a> 
<div id="player"></div>

調用hidePlayer其次showPlayer提供了有關的playVideo調用此錯誤：

Uncaught TypeError: Object #<an HTMLObjectElement> has no method 'playVideo'

我能找到的唯一解決方案是使用visibility：hidden的，但是這是搞亂我的頁面佈局。那裏有其他解決方案嗎？

來源

2010-02-04 zaius

我在我的腳本中遇到過這種情況。你可以嘗試使它成爲1x1像素，而不是完全隱藏它。

這是一個非常煩人的問題，並沒有意義，爲什麼會發生這種情況。

來源

2010-02-10 14:25:04

Both display：none and visibility：hidden將重新加載播放器，但您可以通過將視頻播放器封裝在帶有overflow：hidden的div中的CSS來解決此問題。

HTML：

<div id="ytwrapper"> 
    <div id="ytplayer"> 
    </div> 
</div>

CSS：

#ytwrapper { overflow: hidden; }

JS：

function hidePlayer() { 
    player.pauseVideo(); 
    player.style.marginLeft = "50000px"; 
} 

function showPlayer() { 
    player.style.marginLeft = "0px"; 
    player.playVideo(); 
}

來源

2013-03-23 23:37:34 Will

隱藏的YouTube播放器失去其方法

回答

相關問題