Javascript youtube播放器api启动时自动静音_Javascript_Iframe_Toggle_Youtube Iframe Api_Mute

Javascript youtube播放器api启动时自动静音

javascript iframe

Javascript youtube播放器api启动时自动静音,javascript,iframe,toggle,youtube-iframe-api,mute,Javascript,Iframe,Toggle,Youtube Iframe Api,Mute,所以基本上我有这个按钮来静音youtube视频，一个通过youtube播放器api嵌入的视频，顺便说一句，我希望它开始静音。我似乎无法实现这一点，有人能看到问题吗这是我的java var player, time_update_interval = 0; function onYouTubeIframeAPIReady() { player = new YT.Player('video-placeholder', { videoId: 'sAhYEfQ1168

所以基本上我有这个按钮来静音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>


特伦斯·亨特
投资组合
卷筒
联系
文件夹
这是我的演示卷
特伦斯·亨特
编辑/制片人
音量关闭
接触



发送

很抱歉，它仍然不起作用：（这很奇怪，因为静音按钮工作得很好。我已经戏剧性地更新了我的答案。看看这对你是否有效。让我试着创建一个提琴谢谢你的帮助：）我已经为此失去了几个小时的理智是的，我绝对不能提高我的低代表率，但我接受了它。是的，是你所有的代码修复了它，谢谢！

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();
}