所以基本上我有这个按钮来静音 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();
}
关于javascript - YouTube 播放器 api 在启动时自动静音，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39157487/