youtube player api auto mute on start

그래서 기본적으로 youtube video, youtube player api btw를 통해 삽입 된 비디오를 음소거하려면이 단추가 있습니다. 그래도 음소거가 시작되기를 바랍니다. 나는 그런 일이 일어나지 않을 것입니다, 누군가는 문제를 볼 수 있습니까? 당신이 단지의 경우 HTML을 필요로하는 경우 youtube player api auto mute on start

이

여기가 내 자바

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>

출처

2016-08-26 Indiana Porter

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

출처

2016-08-26 02:41:39

여전히 음소거 버튼이 완벽하게 작동하기 때문에 이상한 :(작동하지 않습니다 죄송합니다 –

대답을 극적으로 업데이트했습니다. 그게 효과가 있는지 확인해보십시오. –

아직 작동하지 않는 것 같아요. ( –

답변

관련 문제