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

【问题标题】：onclick embeded video , background music stoponclick 嵌入视频，背景音乐停止
【发布时间】：2016-10-14 23:56:35
【问题描述】：

我的问题和这个帖子一模一样

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>

【问题讨论】：

标签： javascript html audio embed

【解决方案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>

【讨论】：

image "thevid" 的风格有问题。在我把它放在 javascript 文件之后。
@Zhun 您是否从您的 html 中删除了 ID“thevideo”？顺便说一句，这里是早上 5:50
@Zhun 很明显它的工作原理，给定的例子；这显然是导致此问题的 html 中的一些小错误。如果您愿意，可以发布您的 html
好吧@RachelGallen 它工作，我将代码应用到 html 并且它工作。一切都很顺利，如果我暂停视频播放 bg 音乐恢复，有可能吗？非常感谢！
@Zhun 编辑后的代码会在视频结束时播放背景音乐