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.


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -