title: Image and Video Slider Autoplay
body: <p>Im using bxslider to show images and videos on a slider and i need that the slider show images every 5 seconds but when a video appears, the video autoplay until the end. Then, show the next slide. All of this must be in a loop.</p>
  
  <p>Im stuck and this is not working properly. Here are my problems:</p>
  
  <p>1.- If i set the bxslider "auto=true" to change from one slider to another, it does it when the video is playing.</p>
  
  <p>2.- If i disable the "auto" property the first video play until the end and then change to the next slider, but the next video doesn't play. Instead of that, the first video plays again.</p>
  
  <p>3.- It would be great do this without a plugin, because after solve this I need add some PHP to dinamize the content.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
  &lt;link href="css/videos.css" rel="stylesheet" /&gt;   
  &lt;link href="css/jquery.bxslider.css"  rel="stylesheet"/&gt;
  &lt;script src="js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.bxslider.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.fitvids.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;ul class="bx" &gt;
   &lt;li data-idx="0"&gt;
       &lt;video preload=""   class="video-bg vid" id="vid0" &gt;
              &lt;source src="video/01.mp4" type="video/mp4"&gt;
       &lt;/video&gt;
    &lt;/li&gt;
    &lt;li data-idx="1"&gt;
    &lt;img src="video/slider1.jpg"&gt;
    &lt;/li&gt;
    &lt;li data-idx="2"&gt;
       &lt;video preload=""   class="video-bg vid" id="vid1" &gt;
          &lt;source src="video/02.mp4" type="video/mp4"&gt;
       &lt;/video&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  
   &lt;script&gt;
  
       var vid0= document.getElementById("vid0");
          vid0.onended = function(){
          bx.goToNextSlide();
          bx.redrawSlider();
          vid0.load();
          vid0.play();
          vid1.pause();
      }
      var vid1= document.getElementById("vid1");
         vid1.onended = function(){
         bx.goToNextSlide();
         bx.redrawSlider();
         vid1.load();
         vid1.play();
         vid0.pause();
      }
  
      var bx = $('.bx').bxSlider({
         video: true,
         useCSS: false,
         nextText: '',
         prevText: '',
         mode:'fade',
         infiniteLoop:true,
         auto:true,
         onSliderLoad:function(currentIndex){
         vid0.play();
  
      },
     }); 
  
     &lt;/script&gt;
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>The code before is made it by pieces of other codes that i found on internet.</p>
  
  <p>I will appreciate a lot your help thank you!!</p>
  
  <p>Hector</p>