Trình phát youtube bị ẩn mất phương pháp

Question

Tôi đang kiểm soát trình phát YouTube không được nhúng với javascript và thỉnh thoảng tôi muốn ẩn nó bằng cách đặt hiển thị: không. Tuy nhiên, khi tôi hiển thị lại người chơi, nó mất phương pháp youtube của nó.

Ví dụ:

<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> 

Calling hidePlayer tiếp theo showPlayer cho lỗi này trên các cuộc gọi playVideo:

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

Giải pháp duy nhất tôi có thể tìm thấy là sử dụng visibility: hidden, nhưng đó là rối tung với bố cục trang của tôi. Bất kỳ giải pháp nào khác ngoài kia?

Answer 1

Tôi đã xảy ra điều này với tôi cũng như trong bản người dùng của mình. Bạn có thể thử chỉ làm cho nó 1x1 px, thay vì ẩn nó hoàn toàn.

Đó là một vấn đề khá khó chịu và không có ý nghĩa gì về việc tại sao điều này xảy ra.

Answer 2

Cả hai màn hình: không có và hiển thị: bị ẩn sẽ tải lại trình phát nhưng bạn có thể giải quyết vấn đề này qua CSS bằng cách gói trình phát video vào div bị tràn: bị ẩn.

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(); 
}