CODEWITHSUNDEEP
javascriptjquery
aily
aily

Reputation: 69

play multiple videos in a page with a single jquery script

I have more than 1 video element in a page which is been overwritten by a Jquery script by giving them all a single play button but the problem is than when ever I have more than 1 video element, the video refuses to play but when I have single (just 1), everything works fine. I have searched for solutions and I saw a question here which says "id='' attributes in elements are unique and one should be using class='' attributes for multiple elements" I did change mine to class='' but nothing seems to work for me..

MY JQUERY CODE

$('.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();
    }
});

MY VIDEO ELEMENTS

<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>

MY CSS CODES

.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;
}

Upvotes: 1

Views: 910

Answers (1)

Alen.Toma
Alen.Toma

Reputation: 4870

Sorry I have been wrong about not being able to play more then one videos on webbrowser.

Now lets see how we could smooth the play function on your example.

$('.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>

Upvotes: 1

Related Questions