我正在制作一个带有视频和音乐的有趣的小网站。我在 iMovie 中制作了视频，然后放到了 youtube 上。过去，当我使用 iMovie 时，它会让你先购买音乐，然后再将其添加到视频中。我想我可以通过在我的 html 中包含两个 iframe 来解决这个问题——一个用于 youtube 的音乐，一个用于 iMovie。当网站加载时，我将它们都设置为自动播放，并且隐藏了音乐 iframe。由于它是隐藏的，我看不到音量控制。
我想要一个使音乐静音的选项，所以我想我会在 html 中添加一个按钮，然后执行一个 onclick(以及 JS 中的一个函数)，但我什么都做不了.代码如下。有什么建议吗？我试过很多很多东西。谢谢!
HTML:
<!doctype html>
<html>
<head>
<title>AKO</title>
<link href="https://fonts.googleapis.com/css?family=Lobster|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1><span class="glyphicon glyphicon-hand-left"></span>AKO<span class="glyphicon glyphicon-hand-right"></span></h1><h2 style="font-family: 'Permanent Marker', cursive; margin-top: 0px; padding-top: 0px; border-width: 0px;">Scooter</h2>
<button id="muteButton" class="glyphicon glyphicon-volume-off" onclick="myFunction()" style="float:right;"></button>
</header>
<br />
<hr>
<div align="center">
<iframe width="560" height="315" align="middle" src="https://www.youtube.com/embed/bYjb5Lqdktk?autoplay=1&loop=1&playlist=bYjb5Lqdktk" frameBorder="0" seamless="seamless" allowfullscreen></iframe>
</div>
<hr>
<br />
<div id="bottomDiv">
<div class="col-md-3"></div>
<div class="col-md-2">
<span id="title" style="color: black; font-weight: bold;">
<br>
SPORTS
</span>
<br>
<span style="color: gray;">
Scooter
<br>
Skate
<br>
Surf
</span>
</div>
<div class="col-md-2">
<span id="title" style="color: black; font-weight: bold;">
<br>
AKO
</span>
<br>
<span style="color: gray;">
About
<br>
Athletes
</span>
</div>
<div class="col-md-2">
<span id="title" style="color: black; font-weight: bold;">
<br>
CONTACT
</span>
<br>
<span style="color: gray;">
Email <span style="color: #16B7A2">kmorrical@AKOScoot.com</span>
<br>
Phone <span style="color: #16B7A2">1-800-999-9999</span>
<br>
Location <span style="color: #16B7A2">OB, SD, CA</span>
</span>
</div>
<div class="col-md-3"></div>
</div>
<iframe id="janesMusic" width="0" height="0" src="https://www.youtube.com/embed/beWnAmN1y3o?start=32&autoplay=1" frameborder="0"></iframe>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
JavaScript:
alert("hi!");
var music = document.getElementById('janesMusic');
var button = document.getElementById('muteButton');
function myFunction() {
var media = document.getElementById('janesMusic');
media.volume = 0; /*set volume to zero|takes values btw 0-1*/
media.pause(); /*pause the audio/video*/
}
最佳答案
合法
稍作研究后发现您想要执行的操作(隐藏 YouTube 播放器，仅播放音频部分...)将违反 YouTube API 的服务条款。
您可以在 I 中找到它们。 YouTube API 的其他禁令 Developer Policies .
- separate, isolate, or modify the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, YouTube API Services. For example, you must not apply alternate audio tracks to videos;
- promote separately the audio or video components of any YouTube audiovisual content made available as part of, or in connection with, the YouTube API Services;
- create, include, or promote features that play content, including audio or video components, from a background player, meaning a player that is not displayed in the page, tab, or screen that the user is viewing;
您也可以在这里查看:Webmasters question
示例
当我尝试在较小的播放器中显示视频时。此(不言自明的消息)显示在以下屏幕截图中:
你或许可以解决这个问题，但我绝对不推荐这个。
你能做什么
现在，如果我是你，我会从其他来源获取音乐。因为这违反了他们的服务条款，并且仅针对音频部分流式传输视频效率极低。
我只是将一个音频文件放在同一个工作区中，然后从那里获取它。
<audio id="music" controls>
<source src="audio/music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
然后您应该可以使用 XXX.muted = true 将您的音频内容静音。
音频和视频内容也是如此。
var audio = document.getElementById("music");
audio.muted = true; //audio.muted = false; to unmute
很抱歉，我无法帮助您解决您最初的问题，但我希望这对您有所帮助。
关于javascript - 静音隐藏的 Youtube iframe .. JS 中的按钮 onclick 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42374382/