Question

在我的网页中，我嵌入了背景音乐和背景视频（webm格式）。我正在尝试使播放/暂停按钮图像（png）适用于视频和音乐，但两者都不起作用。

我已经通过嵌入和id 音乐添加了背景音乐：

<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>

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

提前谢谢。

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;
}

这样做后，问题解决了一半。视频可能暂停，但音乐没有。我打开控制台，没有错误，但是，来源 - ＆gt;我的js文件我看到音乐的函数removeAttribute和stop()无效。我读了一点，并了解嵌入不具有与背景视频相同的属性，也不具有音频。所以我决定放弃<embed>并将其替换为<audio>：

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

解决了所有问题，按钮现在工作得非常好。暂停和玩耍。

用于播放/暂停视频无效的Javascript onclick事件

1 个答案: