Jquery : Play video in bootstrap slider

Question

i want to play video when item gets active class in bootstrap slider below is my code

<div class="item" id='mobileapp'>
  <video loop controls width="100%" id='video'>
    <source src="../../vid.mp4" width="100%" height="100%" type="video/mp4"> Your browser does not support the video tag.
  </video>    
  <div class="overlay"></div>
  <div class="carousel-caption">
    <h1 class="super-heading text-white">Heading</h1>
    <div class='row'>
      <div class='col-sm-2 col-sm-offset-1'>
        <img src='../img/googleplay.png' class='img-responsive hidden-xs' />
      </div>   
      <div class='col-sm-2'>
        <img src='../img/applestore.png' class='img-responsive hidden-xs' />
      </div>
    </div>   
  </div>
</div>

Js

<script>
  $(document).ready(function () {

    if ($('#mobileapp').hasClass('active')) {
      $('#video')[0].play();
    }
    else {
      $('#video')[0].pause();
    }

  })
</script>

active class gets added but it does not pay video

Answer 1

the functions 'play' and 'pause' are not jquery functions, they belong to the DOM element. Now to make it work try to execute your code every 10 miliseconds or something like that. Try:

 var videoElt = document.getElementById('video'); $(document).ready(function () { setInterval(function () { if ($('#mobileapp').hasClass('active')) { videoElt.play(); // to play the video } else { videoElt.pause(); // to pause the video } }, 10); });