javascript - Youtube iframe 使用自定义控件/在页面加载时切换静音/取消静音

Question

如何在加载或自定义按钮上切换静音/取消静音单击通过 iframe 添加的 youtube 视频？

我需要在页面加载时自动播放带有声音的 youtube 视频。

这是 iframe ：

<div class="video-container">
<iframe id="player" class="video" src="https://www.youtube.com/embed/'.$vid_id.'?autoplay=1&controls=0&loop=1&mute=1&playlist='.$vid_id.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
</div>

在此链接上找到下面的片段https://yootheme.com/support/question/113708

我将 iframe_api 添加到页面 <script src="https://www.youtube.com/iframe_api"></script>

然后我使用下面的功能进行播放器设置：

  jQuery(function(){jQuery('.video-container iframe').attr('id', 'player');});
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerStateChange() {
      player.unMute();
      player.setVolume(80);
  }

<div class="video-play-btn"></div>

播放按钮脚本

$('.video-play-btn').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

并且没有显示控制台错误。也许我也应该删除 mute=1 ？

标签： javascriptjqueryiframeyoutubeyoutube-api