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

其他一切都可以保持不变。