单击时如何编程youtube嵌入播放器取消静音 [英] how do i program the youtube embed player to unmute when clicked

问题描述

如何将youtube嵌入式播放器设置为在单击后取消静音.您可以在 http://www.harvestarmy.org 主页上看到我所指的嵌入式播放器.它是在右侧显示来自YouTube的最新视频.我将其设置为默认静音，但是我希望它在有人点击时自动取消静音."

How do I set the youtube embedded player to unmute upon clicking it. You can see the embedded player i'm referring to at http://www.harvestarmy.org home page. It's the one at the right where it says "Latest Videos from YouTube. I set it up to be muted by default, but I want it to automatically unmute when someone clicks it.

这是我使用的代码:

<!-- 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>

推荐答案

谢谢您的回答！我将它实现了一些不同，将其添加到onYouTubeIframeAPIReady函数中.

Thank you for that answer! I implemented it a little differently, adding it to the onYouTubeIframeAPIReady function.

我还反转了isUnMuted变量的初始化值.在功能上是相同的，但这种方式更有意义.

I also reversed the initialized value of the isUnMuted variable. Functionally it is the same, but makes more sense this way.

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新闻源中嵌入视频的行为.

This mimics closely the behavior of embedded videos in a Facebook newsfeed.

这篇关于单击时如何编程youtube嵌入播放器取消静音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！