Video Demo

by brightertools

HTML

<div id="container">
    <video id="video" src="http://vjs.zencdn.net/v/oceans.mp4">        
    </video>
    <div id="progressbar"><div id="progress"></div></div>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="seek">Seek sec</button><input id="sec" />
    <span id="current"></span> / <span id="duration"></span>
</div>

CSS

#progressbar {
    border: 1px solid grey;
    height: 10px;
    width: 100%;
}

#progress {
    position: relative;
    height: 100%;
    width: 0;
    background: lightblue;
    /*transition: all linear 1s;*/
}

JavaScript

var video = $("#video").get(0);
video.controls = true;

$("#play").click(function() {
    video.play();
});

$("#pause").click(function() {
    video.pause();
});

$("#seek").click(function() {
    video.currentTime = parseFloat($("#sec").val());
});

$(video).on("timeupdate", function() {
    $("#progress").width((video.currentTime / video.duration) * 100 + '%');
    $("#current").text(formatTime(video.currentTime));
    $("#duration").text(formatTime(video.duration));
});

var formatTime = function(secs) {
    secs = Math.ceil(secs);
    var mins = Math.floor(secs / 60);
    secs = secs % 60;
    return mins + ":" + (secs.toString().length == 1 ? "0" : "") + secs;
};