Question

我的问题与这篇文章完全相同

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>

[edit]

<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嵌入视频，背景音乐停止

1 个答案: