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

Question

我在一个页面上有一个视频滑块，我想在活动视频的顶部添加一个功能性的播放按钮。我按照这里的教程进行操作：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");
        }
    });
});

- Kylie Shelton

Answer 1

需要修复三件事：

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

2. 设置按钮的 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;
   

   }

3. 第5行: 在开头添加$符号$('button')

同时，在jsfiddle中让jQuery起作用，将其与您的JS代码一起添加到窗口中（在下拉菜单中）。

- Pauline Nemchak