用于播放/暂停视频的 Javascript onclick 事件不起作用

Question

在我的网页中，我嵌入了背景音乐和背景视频(webm 格式)。我正在尝试让播放/暂停按钮 images (png) 同时适用于视频和音乐，但是，两者都不起作用。

我已经通过嵌入和 ID music 添加了背景音乐:

<embed src="resources/bgsound.mp3" autostart="true" loop="true" hidden="true" id="music">

我不想使用 UI，仅仅是因为设计，我想继续使用两个按钮，它们是 .png 格式的图像。 我通过以下方式添加的视频:

<video playsinline autoplay muted loop poster="resources/csgotrailer.png" id="bgvid">
<source src="resources/csgotrailer.webm" type="video/webm">
</video>

这些是应该用作按钮的图像:

<img src="images/play.png" alt="Play" height="30" width="30" id="play">
<img src="images/pause.png" alt="Pause" height="30" width="30" id="pause">

(有两个各自的 ID)。这是两张图片的 CSS，无关紧要(或者我相信如此):

#play {
    position: fixed;
    top: 5%;
    left: 5%;
    opacity: 0.175;
}
#pause {
    position: fixed;
    top: 5%;
    left: 9%;
    opacity: 0.175;
}

我希望每当我单击#pause 按钮​​时视频和音乐都暂停，并且当我单击#play 按钮时它们都再次播放。 我尝试了很多次对我的 javascript 进行不同的更正:

var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("pause"),
playButton = document.getElementById("play"),
mus = document.getElementById("music");

playButton.addEventListener("click", function(event) {
    if (vid.paused == false && mus.paused == false)
        return;
    else {
        vid.play();
        mus.play();
    }
});

pauseButton.addEventListener("click", function(event) {
    if (vid.paused == true && mus.paused == true)
        return;
    else {
        vid.pause();
        mus.pause();
    }
});

我在浏览器的控制台中没有收到任何错误/警告，而且当我点击按钮时也没有任何反应。我在 index.html 中定义了它:

<script src="assets/js/buttons.js"></script>

是的，它在正确的文件夹中，因为所有其他 javascript 都在那里并且它们工作正常。我把这个放在所有其他人之后。我注意到如果我把它放在其他人之前，他们中的一些人会停止加载并吐出错误。 知道它会是什么吗？

提前谢谢你。

Answer 1

经过相当长一段时间的试验并感谢@RoryMcCrossan 的评论，我已经能够解决问题。 我添加了 z-index到按钮的 id，因为正如我所怀疑的，它们不能被点击，因为它们在其他对象下面:

#play {
    position: fixed;
    top: 5%;
    left: 5%;
    opacity: 0.175;
    z-index: 1000;
}
#pause {
    position: fixed;
    top: 5%;
    left: 9%;
    opacity: 0.175;
    z-index: 1000;
}

这样做之后，问题就解决了一半。视频可以暂停，但音乐不能。我打开控制台，没有错误，但是，在源 -> 我的 js 文件中，我看到函数 removeAttribute和 stop()因为音乐不起作用。我稍微阅读了一下，了解到嵌入不具有与背景视频或音频相同的属性。所以我决定放弃 <embed>并将其替换为 <audio> :

<audio src="resources/bgsound.mp3" id="music" autoplay></audio>

一切都解决了，按钮现在可以正常工作了。暂停和播放。