2016-08-26 3 views
1

これは基本的に私はyoutubeビデオをミュートするためにこのボタンを持っています。ビデオはYouTubeプレーヤーapi btwに埋め込まれています。私はそれがしかし、ミュートを開始したい。私はそれを起こすように見えることはできません、誰も問題を見ることができますか?あなただけの場合には、HTMLを必要とする場合 youtube player api auto mute on start

この

はここにある私の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'); 
    } 
}); 

ある

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

答えて

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

それはまだミュートボタンが完璧に動作するのでそれは奇妙だ:(働いていない申し訳ありません –

+0

私は自分の答えを劇的に更新しました。それがあなたのために働くかどうかを確認してください。 –

+0

まだ働いていないようです:( –

関連する問題