title: Adding autoplay to <video> when slider item is active in Boostrap Carousel
body: <p>I'm building a Bootstrap Carousel where every slide is a mp4 video. </p>
  
  <p>So far it works OK, but I've observed that the video will loop even if the slider is not visible, which will make that when the next slider is shown, the video will not start from the beginning.</p>
  
  <p>I can control how long every slide is shown with the data-interval and make it match with the length of the video, but it's kinda pointless if the video won't start from the beginning and in the middle of the interval will loop again.</p>
  
  <p>Being so, do you think I could dynamically add the <strong>autoplay</strong> property to every video only when the parent element has the <strong>active</strong> class?</p>
  
  <p>At the end the effect I'm looking for is: slide is shown, video plays from beginning to end, next slide shows, video plays from beginning to end, etc.</p>
  
  <p>Any thoughts? </p>
  
  <pre><code>&lt;div class="item active" data-interval="4000"&gt;
       &lt;video width="100%" loop autoplay muted preload="auto"&gt;
         &lt;source src="&lt;?php bloginfo( 'template_url' ); ?&gt;/slides/vid1.mp4" type="video/mp4"&gt;
       &lt;/video&gt; 
  &lt;/div&gt;
  
  &lt;div class="item" data-interval="3000"&gt;
       &lt;video width="100%" loop autoplay muted preload="auto"&gt;
          &lt;source src="&lt;?php bloginfo( 'template_url' ); ?&gt;/slides/vid2.mp4" type="video/mp4"&gt;
       &lt;/video&gt; 
  &lt;/div&gt;
  </code></pre>