title: Firing "play" for all videos in a function when parent is active in Bootstrap Carousel
body: <p>I'm building a Bootstrap Carousel with an mp4 video in each item. It looks like this:</p>
  
  <pre><code>&lt;div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000"&gt;
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&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"&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;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to trigger the play in each video once the parent element <strong>.item</strong> gets the <strong>.next</strong> class, which is applied when the preceding element finishes the transition.</p>
  
  <p>Basically I'm trying to avoid the video playing in loop when the slide is in view.</p>
  
  <p>From the Bootstrap documentation I see this:</p>
  
  <blockquote>
    <p>Bootstrap's carousel class exposes two events for hooking into
    carousel functionality.</p>
    
    <p>Both events have the following additional properties:</p>
    
    <p>direction: The direction in which the carousel is sliding (either
    "left" or "right"). relatedTarget: The DOM element that is being slid
    into place as the active item.</p>
    
    <p>slide.bs.carousel This event fires immediately when the slide instance
    method is invoked. slid.bs.carousel   This event is fired when the
    carousel has completed its slide transition.</p>
  </blockquote>
  
  <pre><code>$('#myCarousel').on('slide.bs.carousel', function () {
     // do something…
  })
  </code></pre>
  
  <p>Could I just trigger play on  using this function or it would be easier to use a conditional based on the parent having the .next class?</p>