视频叠加层上的播放按钮 - 更改按钮文本答案

【问题标题】：Play button on video overlay - changing button text视频叠加层上的播放按钮 - 更改按钮文本
【发布时间】：2020-11-28 21:28:53
【问题描述】：

我的页面上有一个视频滑块，我正在尝试在活动视频的顶部添加一个功能播放按钮。我在这里按照教程进行操作：https://codeconvey.com/add-html5-video-overlay-play-button/ 该按钮可用于暂停/播放视频；但是，它不会在单击时将文本从“播放”更改为“暂停”。我还尝试更改不透明度或隐藏按钮，以便按钮在播放时不会覆盖视频。我用适用的代码制作了一个 JSFiddle（但由于某种原因，按钮根本没有出现在小提琴中）：https://jsfiddle.net/xasw7dqL 我在控制台中收到错误消息“$ 未定义”，所以我确定它与此有关，但我不知道如何定义它。我之前还没有真正在网站中实现过 JavaScript。提前感谢您的帮助。代码如下：
HTML：

        <div class="image-slider-fade fade">
          <button class="_active">Play</button>
          <video id="vid1" controls>
            <source src="videos/testvid1.mp4" type="video/mp4">
            Your browser does not support the video.
          </video>
        </div>

CSS：

#vid1, #vid2, #vid3, #vid4 {
    width: 100%;
    z-index: -1;
}

button {
    background-color: #666;
    border: medium none;
    color: #fff;
    display: block;
    font-size: 18px;
    left: 0;
    margin: 0 auto;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    top: 50%;
}

button._active {
    opacity: 0.5;
}

button:hover {
    background-color: #e05a00;
}

JavaScript：

//video play button

$(document).ready(function() {
    var ctrlVideo = document.getElementById("video");
    ('button').click(function() {
        if ($('button').hasClass("_active")) {
            ctrlVideo.play();
            $('button').html("Pause");
            $('button').toggleClass("_active");
        } else {
            ctrlVideo.pause();
            $('button').html("Play");
            $('button').toggleClass("_active");
        }
    });
});

【问题讨论】：

标签： javascript html css button video

【解决方案1】：

有 3 件事需要解决：

你写了var ctrlVideo = document.getElementById("video"); 但在 html 中你使用<video id="vid1" controls>。将您的 js 更改为： var ctrlVideo = document.getElementById("vid1");

设置你的按钮的z-index，因为现在你的按钮在播放器后面并且你不能按下它（如果你删除html中的控件，你会注意到，点击根本没有触发）：

 button {
 background-color: #666;
 border: medium none;
 color: #fff;
 display: block;
 font-size: 18px;
 left: 0;
 margin: 0 auto;
 padding: 8px 16px;
 position: absolute;
 right: 0;
 top: 50%;
 z-index: 123;

}

第 5 行：在开头添加 $$('button')

另外，要使 jquery 在 jsfiddle 上运行，请将其添加到窗口中，并使用您的 js 代码（在下拉菜单中）

【讨论】：