Html5 video not playing on bxslider

Currently i have a bxSlider, which has a video on the second slide. I've got the video working inside of the slider fine with the video tag. But what I'm trying to do is get the video to play once the slide is active and current.

This is my current on slide after.

onSlideAfter: function(currentSlide, totalSlides, currentSlideHtmlObject){

                $j(currentSlide).addClass('active-slide');

                if(currentSlideHtmlObject == 1){
                    var video = document.getElementById("video");
                    console.log(video.play());
                } else if(currentSlideHtmlObject == 2 || currentSlideHtmlObject == 0) {
                    $j('video')[0].currentTime = 0;
                }

                modifyDelay(currentSlideHtmlObject);
            }

Ignore my console log, I was just seeing if the .play did anything. It doesn't. Yet the video doesn't seem to play once the slide shows. If i set the video to auto play it will work, but this just doesn't seem to work.

If I run:

document.getElementById("video").play();

I get the following: (which i don't fully understand).

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

Thanks

Solution

You simply use the callback onSlideBefore(). More details in the source in the comments.

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Multi BxSlider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.css" />
  <style>
    /* This centers the img and video */
    
    img,
    video {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <ul class="bx">
    <li data-idx="0">
      <img src="http://dummyimage.com/640x360/000/fff.png&text=1">
    </li>
    <li data-idx="1">

      <!-- Set each video id so that it corresponds with the `data-idx`
      So if slide <li> is data-idx="1", then video id="vid1"-->

      <video id="vid1" class="vid" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>
    </li>
    <li data-idx="2">
      <img src="http://dummyimage.com/640x360/000/fc0.png&text=3">
    </li>
    <li data-idx="3">
      <img src="http://dummyimage.com/640x360/000/0ff.png&text=4">
    </li>
    <li data-idx="4">
      <img src="http://dummyimage.com/640x360/000/b52.png&text=5">
    </li>

  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.js"></script>
  <script>
    var bx = $(".bx").bxSlider({
      pager: false,
      nextText: '',
      prevText: '',
      infiniteLoop: false,
      /*
      This callback will fire a function 
      before a slide completes it's
      course to it's destination
      */
      onSlideBefore: autoPlay
    });
    /*
    This function just uses the `to` parameter
    I put all of them there because bxSlider expects 
    them there, I have bad luck if I don't... don't ask:P
    */
    function autoPlay($ele, from, to) {
      /* 
      idx is the slide index number
      if there is a video within 
      the slide then play it.
      */
      var idx = parseInt(to, 10);
      var vid = document.querySelector('#vid' + idx);

      if (vid) {
        vid.play();
      }
    }
  </script>
</body>

</html>