Блог

Главная - Вопросы по программированию - воспроизведение нескольких видеороликов на странице с помощью одного скрипта jquery

воспроизведение нескольких видеороликов на странице с помощью одного скрипта jquery

#javascript #jquery

#javascript #jquery

Вопрос:

У меня на странице более 1 видеоэлемента, который был перезаписан скриптом Jquery, предоставив им всем одну кнопку воспроизведения, но проблема в том, что когда у меня более 1 видеоэлемента, видео отказывается воспроизводиться, но когда у меня один (всего 1), все работает нормально. Я искал решения, и я увидел здесь вопрос, в котором говорится: « id='' атрибуты в элементах уникальны, и следует использовать class='' атрибуты для нескольких элементов» Я изменил свой class='' , но, похоже, у меня ничего не работает..

МОЙ КОД JQUERY

 $('.post_video').parent().click(function() {
    if ($(this).children(".post_video").get(0).paused){        
        $(this).children(".post_video").get(0).play();   
        $(this).children(".playpause").fadeOut();
    } else {       
        $(this).children(".post_video").get(0).pause();
        $(this).children(".playpause").fadeIn();
    }
});

МОИ ВИДЕОЭЛЕМЕНТЫ

 <div class="video_wrapper">
    <video class="post_video" loop>
              <source src="../assets/images/users/post/videos/VID.mp4" type="video/mp4">
    </video>
    <div class="playpause"></div>
</div>

МОИ CSS-КОДЫ

 .video_wrapper {
    display: table;
    position: relative;
    width: 100%;
}

.playpause {
    background-image: url(../assets/images/playpause.png);
    background-repeat: no-repeat;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

Комментарии:

1. Хорошо, как мне это сделать? Потому что Instagram, похоже, делает то, что я хочу @Alen.Toma

2. Я создал проигрыватель видеостен с помощью ванильного JS. Вы можете проверить, может ли это помочь вам решить вашу проблему: github.com/NicHub/videowall

3. отлично! я собираюсь проверить это @nico

Ответ №1:

Извините, я ошибался в том, что не смог воспроизвести более одного видео в webbrowser.

Теперь давайте посмотрим, как мы могли бы сгладить функцию воспроизведения на вашем примере.

 $('.post_video').parent().click(function() {
    var currentVideo = $(this).children(".post_video").get(0);
    var allVideos = $(".post_video");
    // we have to loop throw all videos exept for the current one and pause them.
    allVideos.each(function(){
       if (currentVideo != this)
       this.pause();
    });

    if (currentVideo.paused){        
        currentVideo.play();   
        $(this).children(".playpause").fadeOut();
    } else {       
        currentVideo.pause();
        $(this).children(".playpause").fadeIn();
    }
}); 
 .video_wrapper {
    display: table;
    position: relative;
    width: 100%;
}

.playpause {
    background-image: url(../assets/images/playpause.png);
    background-repeat: no-repeat;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center;
    cursor: pointer;
} 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="video_wrapper">
        <video class="post_video" loop>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <div class="playpause"></div>
    </div>

    <div class="video_wrapper">
        <video class="post_video" loop>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <div class="playpause"></div>
    </div>

Метки: