player.mute()无法在带有播放列表的YouTube API中使用

时间:2015-07-01 18:12:02

标签: javascript video youtube youtube-api

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

1 个答案:

答案 0 :(得分:0)

您的javascript中存在语法错误;您将done变量定义为jQuery&#39; 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);
});

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