多个视频的播放/暂停切换

Question

我一整天都在寻找这样的结果，并尝试了很多可能性，但到目前为止没有任何成功。

对于一个新网站，我想制作一个包含 3 个视频的视频播放列表，但是当我点击播放/暂停切换时，所有切换都从播放变为暂停，而不仅仅是一个。

我想阻止在 ID 为 toggle1、toggle2、toggle3 等的代码中工作。我想用按钮创建一个类，我可以把它放在每个视频上。当我点击第一个视频的播放按钮时，按钮只需要为第一个视频切换。第 2 和第 3 个视频仍处于暂停状态。

任何帮助将不胜感激！

$('.play-toggle').click(function () {
    if ($(this).hasClass('playvideo')) {
        $(this).removeClass('playvideo');
        $('.play').css({
            "visibility": "hidden",
        });
        $('.pause').css({
            "visibility": "visible",
        });
    } else {
        $(this).addClass('playvideo');
        $('.play').css({
            "visibility": "visible",
        });
        $('.pause').css({
            "visibility": "hidden",
        });
    }
});

<video id="my-video-1" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

<video id="my-video-2" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

<video id="my-video-3" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

Answer 1

要防止在单击一个按钮时所有按钮都切换，请按如下方式调整您的代码。另请注意，您的 HTML 无效 - 您对一个元素使用 2 个类属性。而不是<a class="play-toggle" class="video-play">，只需写<a class="play-toggle video-play">

 $('.play-toggle').click(function () {
    if ($(this).hasClass('playvideo')) {
       $(this).removeClass('playvideo');
       $(this).find('.play').css({
        "visibility": "hidden",
       });
       $(this).find('.pause').css({
        "visibility": "visible",
    });
    } else {
       $(this).addClass('playvideo');
       $(this).find('.play').css({
        "visibility": "visible",
       });
       $(this).find('.pause').css({
        "visibility": "hidden",
       });
    }
});