Javascript 如何编程youtube嵌入播放器在单击时取消静音

如何将youtube嵌入式播放器设置为单击后取消静音。你可以在主页上看到我指的嵌入式播放器。它的右边写着“YouTube上的最新视频。我将其设置为默认静音，但我希望在有人单击时自动取消静音

以下是我使用的代码：

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  // This is a protocol-relative URL as described here:
  //     http://paulirish.com/2010/the-protocol-relative-url/
  // If you're testing a local page accessed via a file:/// URL, please set tag.src to
  //     "https://www.youtube.com/iframe_api" instead.
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '98',
      width: '175',
      playerVars: {
        'list': 'UUFwY5Al1Doy7f0MdKnJ-gaw',
        'modestbranding': 1,
        'showinfo': 0,
        'autoplay': 1
      },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

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

</script>

//2.此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
//这是一个协议相关URL，如下所述：
//     http://paulirish.com/2010/the-protocol-relative-url/
//如果您正在测试通过文件：///URL访问的本地页面，请将tag.src设置为
//     "https://www.youtube.com/iframe_api“相反。
tag.src=“//www.youtube.com/iframe_api”；
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//3.此函数创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
身高：'98'，
宽度：'175'，
playerVars：{
“列表”：“UUFwY5Al1Doy7f0MdKnJ gaw”，
"品牌":1,，
“showinfo”：0，
“自动播放”：1
},
活动：{
“onReady”：onPlayerReady
}
});
}
//4.当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
event.target.mute（）；
}

我认为这是不可能的，因为没有“单击”或“激活”事件。但是，您可以尝试将事件处理程序添加到“onStateChange”事件中，并取消静音和取消暂停您的播放机。我没有尝试过，但请尝试一下，看看这是否有效：

var isUnMuted = true;

player.addEventListener("onStateChange", function(event) {
     if( player.isMuted() && player.getPlayerState() == 2 && isUnMuted ) {
          player.unMute();
          player.playVideo(); // resume playback
          isUnMuted = false;  // you want to run this once only! 
     }
});

---

谢谢你的回答！我实现了一点不同，将它添加到onYouTubeIframeAPIReady函数中

我还反转了isUnMuted变量的初始化值

var player;
var isUnMuted = false;
window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('youTube', {
        videoId: '[myVideoId]',
        playerVars: {
            'rel': 0,
        },
        events: {
            'onReady': function() {
                player.mute();
                player.playVideo();
            },
            'onStateChange': function () {
                if (player.isMuted() && player.getPlayerState() == 2 && !isUnMuted) {
                    player.unMute();
                    player.playVideo();
                    isUnMuted = true;
                }
            }
        }
    });
}

---

这与Facebook新闻源中嵌入视频的行为非常相似。

这是可行的。但不幸的是，单击视频时暂停图标会消失。即使视频继续运行，这也不是一个干净的解决方案。 我在实际视频iframe上方放置了一个大小完全相同的

，并使用它的

click（）

功能取消视频静音

HTML:

Javascript:

$('.video-dummy').click(function(){
  player.unMute();
});

这对我来说很好

.video-container {
  position: relative;
  width: 640px;
  height: 390px;
}

.video-dummy {
  width: 640px; 
  height: 390px;
  position: absolute;
}

$('.video-dummy').click(function(){
  player.unMute();
});