Как сделать так, чтобы видео перестало воспроизводиться при переключении на другое видео?

avatar
Ed Gar
1 июля 2021 в 16:47
203
1
0

На моем веб-сайте есть видеоплеер и несколько видео, и я не могу остановить воспроизведение видео при воспроизведении другого. Если бы это можно было сделать с помощью CSS, было бы неплохо, но если нет, то как я могу сделать это с помощью JS на моей странице с моим кодом?.................. ................................................. ................................................. ................................................. ......................

<div class="videos">
        <div class="vids">
            <input type="radio" name="video-slide" id="vid1" checked>
            <input type="radio" name="video-slide" id="vid2">

            <video src="video1.mp4" controls class="v1" alt="vid1"></video>
            <video src="video2.mp4" controls class="v2" alt="vid2"></video>
            <div class="dots">
                <label for="vid1" id="btn1"></label>
                <label for="vid2" id="btn2"></label>
            </div>
        </div>
</div>

<style>
.videos{
    background-color: coral;
    width: 60%;
    position: relative;
    margin: 0 auto;
}
.vids{
    background-color: cornflowerblue;
    width: 80%;
    display: flex;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
}
.vids video{
    width: 100%;
    height: 380px;
}
.vids input{
    display: none;
}
.dots{
    display: flex;
    justify-content: center;
    width: 80%;
    position: absolute;
    bottom: 0;
}
.dots label{
    height: 12px;
    width: 12px;
    background-color: darkslategray;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 8px;
}
.dots label:hover{
    background-color: gray;
}
#vid1:checked ~ .v1{
    margin-left: 0;
}
#vid2:checked ~ .v2{
    margin-left: -100%;
}
#vid1:checked ~ .dots #btn1{
    background-color: white;
}
#vid2:checked ~ .dots #btn2{
    background-color: white;
}
</style>
Источник
Matt
1 июля 2021 в 16:50
0

Я думаю, что есть событие onplay. Вы можете прослушать его и поставить на паузу все остальные видео. coderhelper.com/questions/5958132/…

Ed Gar
1 июля 2021 в 19:06
0

Дело в том, что это для модального, я думаю. Мой - это div с видео в нем.

Ответы (1)

avatar
Harsh
1 июля 2021 в 16:59
0

Это можно реализовать с помощью Javascript...

<script>
var vid1 = document.getElementById("vid1");
document.getElementById("vid1").addEventListener("blur", pauseVid);

function pauseVid() 
   {
        vid1.pause();
   }
</script>

Итак, здесь мы добавили прослушиватель событий onblur, который будет вызывать функцию для приостановки видео, когда фокус этого элемента (видео) будет потерян... вы можете использовать тот же код и для других идентификаторов видео. ..Дайте мне знать, если это сработает (:

Ed Gar
1 июля 2021 в 20:59
0

Нет, чувак, это не сработало. Я переключаюсь на другое видео, а первое все еще воспроизводится. И даже когда я играю в другую, она все равно играет @Harsh