onclick嵌入视频，背景音乐停止

Question

我的问题就是这样post

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>

Answer 1

首先，（除了有背景音乐的 boohiss），你最好创建一个函数而不是在你的 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>

onclick嵌入视频，背景音乐停止

onclick embeded video , background music stop

html

javascript

embed

audio