onclickの埋め込まビデオ、バックグラウンドミュージック

-1

私の問題は、まさにこのポストのようonclickの埋め込まビデオ、バックグラウンドミュージック

How to stop music when embedded youtube video starts?

である。しかし、それは私の問題を解決していません停止します。

音楽のための私のhtml：

 <audio id="myAudio" autoplay> 
       <source src="music/Morning-Sun.wav"> 
     </audio>

埋め込みビデオ：

  <div class="video"> 
       <div onclick="thevid=document.getElementById('thevideo'); 
        thevid.style.display='block'; this.style.display='none'; 
        document.getElementById('iframe').src = 
        document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">  
        <img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" /> 
       </div> 
       <div id="thevideo" style="display: none; width:100%;"> 
        <div class="embed-container"> 
         <iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&amp;showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe> 
        </div> 
       </div> 
      </div>

[編集]

<div class="video"> 
        <div onclick="thevid=document.getElementById('thevideo'); 
         thevid.style.display='block'; this.style.display='none'; 
         document.getElementById('iframe').src = 
         document.getElementById('iframe').src.replace('autoplay=0','autoplay=1'); 
         var aud = document.getElementById('myAudio'); aud.pause();">  
         <img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" /> 
        </div> 
        <div id="thevideo" style="display: none; width:100%;"> 
         <div class="embed-container"> 
          <iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&amp;showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe> 
         </div> 
        </div> 
</div>

出典

2016-06-14 webretard

まず、（脇boohissからBGMを持つため）、あなたはあなたのhtmlにjavascriptの文字列を含めるのではなく、関数を作成する方が良いです。あなたは私が修正した変数として 'thevid'を定義しないというエラーを出しました。あなたはそれを停止するために、任意の時点のいずれかでオーディオを呼び出していなかったので、私はidでそれを見つけると、ビデオの再生には、それを一時停止する変数を作成しました。

当然のことながら、私の音が異なっており、それが短いと私はループにそれを設定しているが、あなたはこれを簡単に修正することができます。

希望、これはあなたを助け:)

var thevid=document.getElementById('thevideo'); 
 
var thumb=document.getElementById('thumb'); 
 
var playing = 1; 
 
function playvid(){ 
 

 
thevid.style.display='block'; 
 
thumb.style.display='none';     document.getElementById('iframe').src = 
 
        document.getElementById('iframe').src.replace('autoplay=0','autoplay=1'); 
 
var aud = document.getElementById('myAudio'); 
 

 
aud.pause(); 
 
playing = 0; 
 

 
thevid.onended = function(){ 
 
    aud.play(); 
 
}; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <audio id="myAudio" autoplay loop> 
 
     <source src="http://www.rachelgallen.com/monkey.mp3"> 
 
</audio> 
 
<div class="video"> 
 
       <div id="thumb"> 
 
        <img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" onclick='playvid();' /> 
 
       </div> 
 
       <div id="thevideo" style="display: none; width:100%;"> 
 
        <div class="embed-container"> 
 
         <iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&amp;showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</body> 
 
</html>

出典

2016-06-14 18:46:09

http://jsbin.com/sahitobiko/edit?html,js,output –

[画像]（のhttp：// I .stack.imgur.com/YYdMz.jpg）「thevid」のスタイルを超える問題があります。私はjavascriptファイルに入れた後。 – webretard

@Zhunあなたのhtml恐らくからID「thevideo」を削除したのですか？ここところでその5:50 –

onclickの埋め込まビデオ、バックグラウンドミュージック

答えて

関連する問題