player.mute（）無法在YouTube API中使用播放列表

Question

我想在播放9秒後將其靜音。我測試了各種東西，包括cuePlaylist和其他東西。

以下是代碼 -

<div id="topplayer" align="center"></div> 

<script> 
jQuery(document).ready(function($) { 
    var done = false; 

    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
}); 

function onYouTubeIframeAPIReady() { 
    topplayer = new YT.Player('topplayer', { 
     height: '315', 
     width: '560', 
     events: { 
     'onReady': onTopPlayerReady, 
     'onStateChange': onTopPlayerStateChange 
     } 
    }); 
} 

function onTopPlayerReady(event) { 

    event.target.loadPlaylist({ 
     listType:'playlist', 
     list: 'PL55713C70BA91BD6E', 
     index: 0, 
    }); 

    event.target.playVideo(); 
} 

function onTopPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(muteVideo, 9000); 
     done = true; 
    } 
} 

function muteVideo() { 
    topplayer.mute(); 
} 
</script> 

現在，有了這個代碼視頻播放列表加載和自動運行（我想），但它永遠不會靜音。

PS。我嘗試了官方developers.google.com YouTube API中提供的默認示例，並將player.stopVideo()更改爲player.mute()，並且它可以正常工作。所以，我相信當我嘗試加載播放列表而不是單個視頻時，問題就會出現。下面的代碼效果很好（它自動運行並將視頻靜音） -

<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: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     event.target.playVideo(); 
     } 

     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.mute(); 
     } 
    </script> 

Answer 1

您的javascript語法錯誤;您將done變量定義爲本地內部jQuery的ready方法，因此該變量不可用於任何其他方法（您可以通過在運行代碼時打開Chrome的開發工具來驗證此變量;您會看到onPlayerStateChange方法是抱怨沒有done變量）。

的解決方案將是移動變量的聲明ready方法之外，像這樣：

var done = false; 
jQuery(document).ready(function($) { 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
}); 

事都可以保持不變。