OnClick嵌入式视频，背景音乐停止

我的问题就像这篇文章

嵌入YouTube视频开始时如何停止音乐？

但不能解决我的问题。

我的音乐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>

首先（除了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>

相关内容

最新更新

热门标签：