title: Pause HTML5 video when out of view
body: <p>I've built a multimedia slider with images and html5 video using <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick slider</a>-- <a href="http://jsfiddle.net/nickpish/nn3sw00f/" rel="nofollow noreferrer">a fiddle can be viewed here</a>-- and I'm trying to find a way to automatically pause any videos that might be playing that are not active in the slider, i.e. those that are out of view. Thus, if a viewer clicks a video to play, then progresses through the slider, that video will in turn pause, so no two videos can be playing at the same time.</p>
  
  <p>Slick slider appends a class of <code>.slick-active</code> to all slides currently in view, so I'm thinking I need to isolate (via jQuery perhaps) all slides containing video that <em>do not</em> have the <code>.slick-active</code> class applied, and ensure that video playback is stopped?</p>
  
  <p>I found a helpful SO thread <a href="https://stackoverflow.com/questions/9383725/set-an-html5-video-to-pause-when-video-player-is-out-of-view">here</a>, that describes the use of <code>getElementsByClassName</code> to select video content in a slider that is not active, however I cannot employ this same method as slick slider only adds classes to those frames currently <em>in view</em>.</p>
  
  <p>How might I use jQuery to select the appropriate slides and stop any active playback? Thanks in advance for any assistance here.</p>