我如何对 youtube 嵌入播放器进行编程以在单击时取消静音

Posted 2023-03-13

【中文标题】我如何对 youtube 嵌入播放器进行编程以在单击时取消静音

【英文标题】：how do i program the youtube embed player to unmute when clicked

【发布时间】：2013-05-20 14:43:51

【问题描述】：

如何将 youtube 嵌入式播放器设置为在单击时取消静音。您可以在http://www.harvestarmy.org 主页看到我所指的嵌入式播放器。它在右侧显示“来自 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>

【参考方案1】：

这行得通。但不幸的是，当点击视频时，暂停图标会淡入。即使视频继续播放，它也不是一个干净的解决方案。 我通过在实际视频 iframe 上方放置一个大小完全相同的<div> 来修复它，并使用它的click() 函数取消视频静音。

html：

  <div class="video-container">
    <div class="video-dummy">
    </div>
    <div id="player">
    </div>
  </div>

CSS：

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


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

javascript：

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

这对我来说效果很好。

【参考方案2】：

谢谢你的回答！我实现它有点不同，将它添加到 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 新闻源中嵌入视频的行为非常相似。

【参考方案3】：

我认为这是不可能的，因为不存在“点击”或“激活”事件。但是，您可以尝试将事件处理程序添加到“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! 
     
);