Onclick embeded Video, Stop Hintergrundmusik

-1

Mein Problem ist, genau wie dieser BeitragOnclick embeded Video, Stop Hintergrundmusik

How to stop music when embedded youtube video starts?

Aber es ist nicht mein Problem zu lösen.

Meine html für Musik:

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

einbetten Video:

  <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>

[Bearbeiten]

<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>

Quelle

2016-06-14 webretard

Zunächst einmal (abgesehen von boohiss für Hintergrundmusik haben), Sie sind besser dran, eine Funktion zu erstellen, anstatt eine Zeichenfolge von Javascript in Ihrem HTML-Code enthalten. Sie haben den Fehler gemacht, 'thevid' nicht als eine Variable zu definieren, die ich korrigiert habe. Du hast den Ton an keinem Punkt aufgerufen, um ihn zu stoppen, also habe ich eine Variable erstellt, um sie anhand der ID zu finden, und sie bei der Videowiedergabe anhalten.

Natürlich ist mein Sound anders, und wie es kurz ist, habe ich es auf Loop eingestellt, aber Sie können dies leicht ändern.

hoffe das hilft dir heraus :)

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>

Quelle

2016-06-14 18:46:09

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

[Bild] (http: // i .stack.imgur.com/YYdMz.jpg) Es gibt ein Problem mit dem Stil von "thevid". nachdem ich es auf Javascript-Datei gesetzt habe. – webretard

@Zhun hast du die ID "thevideo" aus deinem HTML entfernt? BTW seine 5:50 Uhr hier –

Onclick embeded Video, Stop Hintergrundmusik

Antwort

Verwandte Themen