youtube 播放器 api 开始时自动静音

Question

所以基本上我有这个按钮来静音 youtube 视频，通过 youtube 播放器嵌入的视频 api 顺便说一句。我希望它开始静音。我似乎无法做到这一点，有人能看出问题所在吗？

这是我的java

var player,
    time_update_interval = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        videoId: 'sAhYEfQ1168',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'mute': 1
        },
        events: {
            onReady: initialize
        }
    });
}

function initialize(){

    // Update the controls on load
    updateTimerDisplay();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
    }, 1000);


    $('#volume-input').val(Math.round(player.getVolume()));
}





$('#mute-toggle').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');
    }
});

如果您需要 html 以防万一这里是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Terrence Hunt</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
    <div class="cover">



      <div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel">




         <ol class="carousel-indicators carousel-indicators-numbers">
    <li data-target="#carousel-example-generic" data-slide-to="0">Portfolio</li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class="active">Reel</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">Contact</li>
  </ol>



        <div class="carousel-inner">



<div class="item">
<div class="fill" style="background-image:url('nyc-8.jpg');"></div>
  <div class="carousel-caption container-fluid">
      <h1>Portfolio</h1>
    <p>This is my demo reel.</p>
  </div>
</div>


<div class="item active">

<div class="item active">
<div class="fill" style="background-image:url('nyc-jpg');"></div>
  <div class="carousel-caption">
      <div class="blackbar1">
      <h1>Terrence Hunt</h1>
    <p>Editor / Producer</p>
            <i id="mute-toggle" class="material-icons">volume_off</i>
      </div>
      <div class="element-2 embed-responsive embed-responsive-16by9">
      <div id="video-placeholder"></div>

</div>
                <div class="blackbar2"></div>

  </div>

</div>

</div>


<div class="item">
<div class="fill" style="background-image:url('nyc-9.jpg');"></div>
  <div class="carousel-caption">
      <h1 style="margin:100px auto;">Contact</h1>





                          <form name="sentMessage" id="contactForm" novalidate>
                        <div class="col-md-8 col-md-offset-2">
                                <div class="form-group">
                                    <input type="text" class="form-control form" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control form" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control form" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>
                                <button type="submit" class="btn btn-xl form form-button">Send</button>
                            </div>
                        </div>
                    </form>





  </div>
</div>
</div>




    </div>



        </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <script src="jqBootstrapValidation.js"></script>
    <script src="contact_me.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="js/script.js"></script>

</body>
</html>

Answer 1

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        videoId: 'sAhYEfQ1168',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'rel':0
        },
        events: {
           'onReady': onPlayerReady
        }
    });

}

function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
}

youtube 播放器 api 开始时自动静音

youtube player api auto mute on start

javascript

iframe

toggle

mute

youtube-iframe-api