在显示和隐藏后在youtube api上构建自动播放视频

Question

我在一个页面上使用youtube的API构建了4个视频（ loading multiple video players with youtube api）

我需要一次显示一个视频，所以我隐藏并在导航中点击显示每个div id，但看起来视频在稍后返回时会自动停止播放，怎么能我让视频自动播放？

<ul>
    <li id="play1"><a href="">Video 1</a></li>
  <li id="play2"><a href="">Video 2</a></li>
    <li id="play3"><a href="">Video 3</a></li>
      <li id="play4"><a href="">Video 4</a></li>
</ul>
<div id="player1"></div>
<div id="player2" style="display:none;"></div>
<div id="player3" style="display:none;"></div>
<div id="player4" style="display:none;"></div>
<script src="http://www.youtube.com/player_api"></script> 
<script>

        // create youtube player
        var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player1', {
      height: '390',
      width: '640',
      videoId: 'KcXxHZssCh4',
       events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
    player2 = new YT.Player('player2', {
      height: '390',
      width: '640',
      videoId: 'ZGDwEr0GT10', 
      events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
     player3 = new YT.Player('player3', {
      height: '390',
      width: '640',
      videoId: 'Cgk-LdjxVZg', 
      events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
     player4 = new YT.Player('player4', {
      height: '390',
      width: '640',
      videoId: 'H5RsI3aIkVg', 
      events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
  }
        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }
$('#play1').click(function(){
    $('#player1').show();
    $('#player2, #player3, #player4').hide();

       return false;


});
$('#play2').click(function(){
    $('#player2').show();
    $('#player1,#player3, #player4').hide();
         return false;
});
$('#play3').click(function(){
    $('#player3').show();
    $('#player1,#player2, #player4').hide();

         return false;

});
$('#play4').click(function(){
    $('#player4').show();
    $('#player1, #player2, #player3').hide();
         return false;
});
</script>

http://jsfiddle.net/P2qaT

谢谢！