Play/pause 切换多个视频

Question

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

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

我想阻止使用 ID toggle1、toggle2、toggle3 等代码。我想创建一个带有按钮的 class，我可以将其放在每个视频中。当我点击第一个视频的播放按钮时，按钮只需要为第一个视频切换。第二个和第三个视频继续暂停。

如有任何帮助，我们将不胜感激！

$('.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 个 class 属性。而不是 <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",
       });
    }
});

Play/pause 切换多个视频

Play/pause toggle for multiple videos

html

javascript

video

jquery

video.js