CODEWITHSUNDEEP
javascriptjquerycsshtmlvideo
Shadna
Shadna

Reputation: 65

Stop/Play on DIV show/hide HTML5 Video

You've all been so great in helping me in the past and I'm hoping we can solve this next problem as well.

I am building a slideshow of sorts using videos as backgrounds instead of images. Everything is working perfectly except that the timing of the videos is off because even though my divs are hidden the videos are all playing at the same time.

So, what I need is a JS/jQuery solution to stop (not pause) and play the videos as the divs are hidden/shown. Here's my code so far:

jsfiddle: http://jsfiddle.net/Z2Nq8/1/

JS:

$(function () {

var counter = 0,
    divs = $('#video1, #video2, #video3');

function showDiv () {
    divs.hide() 
        .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
        .show(); 

    counter++;
}; 

showDiv();     

setInterval(function () {
    showDiv(); 
}, 7 * 1000);     
});

HTML:

`<div id="videocont">
    <div id="video1" class="display">
        <video autoplay loop poster="PHI.png" id="bgvid">
        <source src="URL/video.mp4" type="video/mp4">
        </video>
             <div id="title">Headline text.
        </div>
    </div>
    <div id="video2" class="display">
        <video autoplay loop poster="PHI.png" id="bgvid">
        <source src="URL/video.mp4" type="video/mp4">
        </video>
             <div id="title">Headline text.
        </div>
    </div>
    <div id="video3" class="display">
        <video autoplay loop poster="PHI.png" id="bgvid">
        <source src="URL/video.mp4" type="video/mp4">
        </video>
             <div id="title">Headline text.
        </div>
    </div>
</div>`

Thanks!

Upvotes: 1

Views: 3985

Answers (1)

speak
speak

Reputation: 5392

You have auto play on all of the videos.

Set auto play on the first element, then when you're going through the videos use:

VideoElement.play()

And

VideoElement.pause()

If you want to then reset the video you can do:

VideoElement.currentTime = 0;

To manage the videos playing.

Working Fiddle

Upvotes: 5

Related Questions