Video Demo

by SHELDON PASCIAK

HTML

<div id="container">
    <video id="video" src="http://lostwords.org/tagx.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>

<br />
<input type="text" id="theC" />
<button id="theS">
Save
</button>

<div id="something">

</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 comment = {
	message:"this message",
  time:1
}
var savedCurrentTime = "";

var comments = [{"message":"tiger","time":"0:08"},{"message":"tiger","time":"0:09"},{"message":"puppies","time":"0:16"},{"message":"puppies","time":"0:20"},{"message":"puppies","time":"0:22"},{"message":"puppies","time":"0:23"},{"message":"horse","time":"0:27"},{"message":"horse","time":"0:24"},{"message":"horse","time":"0:25"}];

function addComment(theComment,theTime) {

comment.message=theComment;
comment.time=theTime;

var clonedComment = JSON.stringify(comment);

comments.push(JSON.parse(clonedComment));

console.log(JSON.stringify(comments));

}

function saveC() {

	addComment($('#theC').val(),savedCurrentTime);
  
}

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

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

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

$("#theS").click(function() {
    saveC();
    
});

$("#seek").click(function() {

video.currentTime = parseFloat(0 + $("#sec").val());
});

$(video).on("timeupdate", function() {

savedCurrentTime=formatTime(video.currentTime);

for (var i=0;i<comments.length;i++) {
//console.log(JSON.stringify(comments[i]));
if (comments[i].time===savedCurrentTime) {
console.log(comments[i].message + " " + savedCurrentTime);
$('#something').append(comments[i].message + " " + savedCurrentTime);
}
}
    $("#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;
};

video.currentTime=8;

    video.play();