Question

我正在制作一个有趣的小网站，其中包含视频和音乐。我在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*/
}

Answer 1

<强>法律

暂时进行了一些研究，发现你想要做的事情（隐藏的YouTube播放器，只播放音频部分......）将违反YouTube API的服务条款。

你可以在 I中找到它们。其他禁止是YouTube API Developer Policies的一部分。

分离，隔离或修改作为YouTube API服务的一部分或与之相关的任何YouTube视听内容的音频或视频组件。例如，您不得将备用音轨应用于视频;

单独宣传作为YouTube API服务的一部分或与之相关的任何YouTube视听内容的音频或视频组件;

创建，包含或宣传从后台播放器播放内容（包括音频或视频组件）的功能，这意味着播放器未显示在用户正在查看的页面，标签或屏幕中;

你也可以看一下：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

建议阅读：W3Schools HTML5 Audio

对不起，我对你的初步问题无法帮助你，但我希望这会有所帮助。

将一个隐藏的Youtube iframe ..按钮onclick在JS中无效

1 个答案: