javascript - HTML5 video autoplay and autostop when specific class on it -

i have slider of videos, want autoplay when visible , autostop when not visible. visible video @ moment of stay visible has class (active) 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 that?

you can manipulate states of video javascript. playing example can select video tag have class active , play it:

document.queryselector('video.active').play(); 

for other video tags can pause them code:

var videos = document.queryselectorall('video.item'); for(var = 0; < videos.length; i++) {     videos[i].pause(); } 

you need make manipulation on click, or on slide change, , take note first need stop videos play video active class.