HTML5-video - autoplay

HTML

<video id="video" autobuffer controls >
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<button>Play next clip.</button>

CSS

html {padding: 20px 0; background-color: #efefef;}
body {width: 400px; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5);}

video {
    width: 400px; 
    display: block;
}

JavaScript

var videoSegments = [
    { startTime: 2, endTime: 4},
    { startTime: 10, endTime: 13},
    { startTime: 21, endTime: 25},
    { startTime: 38, endTime: 45}
];

var currentSegment = -1;

$(document).ready( function() {
    var myVideo = document.getElementById("video");
    
    myVideo.addEventListener("timeupdate",function(){
        if(myVideo.currentTime >= videoSegments[currentSegment].endTime) myVideo.pause();
    });
    
    $("button").click( function() {
        if(currentSegment == videoSegments.length - 1) return;
        
        currentSegment++;
        myVideo.currentTime = videoSegments[currentSegment].startTime;
        myVideo.play();
    });
});