HTML5 video autoplay and autostop when specific class on it

Question

I have an slider of videos, I want to autoplay when visible and autostop when not visible. The visible video at the moment of stay visible has a class (active) that identifies it.

<video class="item active" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">
<video class="item" controls autoplay poster="" width="640" height="360">

How can I do that?

Answer 1

I trigger the events on my slider when translates an initialize a slide an then execute these functions:

When translate:

function(){
           $('.item').find('video').each(function(){
               this.pause();
           });

When initialize a new slide (to automatically play it):

function(){
           $('.active').find('video').each(function(){
               this.play();
           });

That solved my problem.