JS内の非表示のYouTube iframe ..ボタンonclickを無効にする

私はビデオと音楽で楽しい小さなウェブサイトを作っています。私はiMovieでビデオを作ってから、YouTubeに入れました。これまでiMovieを使用していたときに、音楽に追加する前に音楽を購入することができました。私は、iMovieのYouTubeとiMovieの音楽のために、HTMLで2つのiframeを含めることでこれを回避すると考えました。サイトが読み込まれたときに自動再生され、音楽iframeが非表示になります。それは隠されているので、ボリュームコントロールが見えません。JS内の非表示のYouTube iframe ..ボタンonclickを無効にする

音楽をミュートするオプションが必要なので、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

：W3Schools HTML5 Audio

を私はあなたの最初の質問であなたを助けることができなかった残念ですが、私はこのことができます願っています。

出典

2017-02-21 17:52:18 Miles07

hmmまだ動作していません。遅延して申し訳ありません。 – CodingK8

@ CodingK8希望：私は助けることができます:) – Miles07

JS内の非表示のYouTube iframe ..ボタンonclickを無効にする

答えて

関連する問題