靜音一個隱藏的Youtube iframe ..按鈕onclick JS不工作

我正在一個有趣的小網站與視頻和音樂。我在iMovie中製作了視頻，然後放入YouTube中。在過去，當我使用iMovie時，它會讓您在將音樂添加到視頻之前購買音樂。我想我會通過在我的html中包含兩個iframe來解決這個問題，一個是來自youtube的音樂，一個是iMovie。當網站加載時，我會將它們放在自動播放中，並且隱藏音樂iframe。由於它是隱藏的，我看不到音量控制。靜音一個隱藏的Youtube iframe ..按鈕onclick JS不工作

我想要一個靜音的選項，所以我以爲我會在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">[email protected]</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*/ 
}

來源

2017-02-21 CodingK8

法律

有一點研究了一下，發現你想要做的（隱藏YouTube播放器是什麼，只播放音頻部分...）將違反YouTube API的服務條款。

你可以在中找到他們I.額外禁止部分YouTube API Developer Policies。

分開，隔離或修改任何YouTube的視聽內容的音頻或視頻組件提供作爲其一部分，或者與YouTube的API服務的連接。例如，您不得將備用音軌應用於視頻;

分開宣傳作爲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

靜音一個隱藏的Youtube iframe ..按鈕onclick JS不工作

回答

相關問題