视频无法在自动滑块中完全播放

Question

我想在自动滑块中播放视频。但是它没有完全播放。在完成视频之前它会转到下一张幻灯片。我的代码是......

<div id="slideshow">
            <div>
            <img src="images/1.jpg" style="width:100%;" alt="1" />
            <p>1</p>
           </div>              
           <div>
            <img src="images/2.jpg" style="width:100%;" alt="2" />
            <p>2</p>
           </div>

           <div>
            <video controls="" height="500" width="380">
              <source src="videos.mp4" type="video/mp4" />
            Your browser does not support the video tag.                    
            </video>                
            <p>3</p>
           </div>
</div>

我的jquery代码......

$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);