clipbucket/upload/player/CB_video_js/js/timecomments.js

var TimeComments = function(player,settings){
	var timecomments = this;
	timecomments.player = player;
	timecomments.settings = settings || {};
	timecomments.c_fired = false;
	timecomments.currentIndex = 0;
	timecomments.init();
}
TimeComments.prototype.DummyComments = function(){
	var comments =  [
						{"id":"1", "comment" : "This is first comment","time" : "2.25635","avatar":"http://demo.clipbucket.com/images/avatars/1.jpg"},
					 	{"id":"2", "comment" : "This is Second comment","time" : "6.12353","avatar":"http://demo.clipbucket.com/images/avatars/1.jpg"},
					 	{"id":"3", "comment" : "This is Third comment","time" : "9.25635","avatar":"http://demo.clipbucket.com/images/avatars/1.jpg"},
					 	{"id":"4", "comment" : "This is Fourth comment","time" : "12.25635","avatar":"http://demo.clipbucket.com/images/avatars/1.jpg"},
					 	{"id":"5", "comment" : "This is Fifth comment","time" : "15.25635","avatar":"http://demo.clipbucket.com/images/avatars/1.jpg"},
					 	{"id":"6", "comment" : "This is Sixth comment","time" : "18.25635","avatar":"http://demo.clipbucket.com/images/avatars/1.jpg"},
					]
	return comments;
}

TimeComments.prototype.init = function(){
	var timecomments = this;
	timecomments.comments = timecomments.DummyComments();
	timecomments.Structure();
	timecomments.BindComments();
}

TimeComments.prototype.Structure = function(){
	var timecomments = this;
	var CommentsParent = document.createElement('div');
	CommentsParent.className = "cb-vjs-comments-main";
	CommentsParent.id = "cb-vjs-comments";
	var errorDisplay = timecomments.player.getChild('errorDisplay').el_;
	timecomments.player.el_.insertBefore(CommentsParent, errorDisplay);

	var UnOrderedList = document.createElement('ul');
	UnOrderedList.id = "cb-vjs-comments-list-main";
	UnOrderedList.className = "cb-vjs-comments";
	
	CommentsParent.appendChild(UnOrderedList);
	
	var commentStructure = { "listComm" : "",
							 "iteration" : "",
							 "commentBox" : "",
							 "avatar" : "",
							 "username" : "",
							 "comment" : ""
						};

	for (var i = 0; i < timecomments.comments.length ; i ++ ){
		commentStructure.iteration = i + 1;
		commentStructure.listComm = document.createElement("li");
		commentStructure.listComm.id = "comment-"+timecomments.comments[i].id; 
		commentStructure.listComm.className = "cb-vjs-comments-list";

		commentStructure.avatar = document.createElement("img");
		commentStructure.avatar.className = "cb-vjs-comments-avatar";
		commentStructure.avatar.src = timecomments.comments[i].avatar;

		commentStructure.commentBox = document.createElement("div");
		commentStructure.commentBox.className = "cb-vjs-comment-box";
		

		commentStructure.username = document.createElement("span");
		commentStructure.username.className = "cb-vjs-comment-username";
		commentStructure.username.innerHTML = "jameel Rehman";

		commentStructure.comment = document.createElement("div");
		commentStructure.comment.className = "comment";
		commentStructure.comment.innerHTML = timecomments.comments[i].comment; 

		if ( commentStructure.iteration  == 5 ){
			commentStructure.listComm.className = "cb-vjs-comments-list active";
		}

		commentStructure.commentBox.appendChild(commentStructure.username);
		commentStructure.commentBox.appendChild(commentStructure.comment);

		commentStructure.listComm.appendChild(commentStructure.avatar);
		commentStructure.listComm.appendChild(commentStructure.commentBox);
		UnOrderedList.appendChild(commentStructure.listComm);
	}
}

TimeComments.prototype.BindComments = function(){
	var timecomments = this;
	timecomments.player.timecomments = timecomments;
	timecomments.player.on("timeupdate",timecomments.TriggerComment);
}

TimeComments.prototype.TriggerComment = function(){
	var player = this;
	player.timecomments.c_fired = false;
	var comments = player.timecomments.comments[player.timecomments.currentIndex];
	if (typeof comments != 'undefined'){
		var CurrentTime = player.currentTime();
		if (!player.timecomments.c_fired && CurrentTime >= comments.time && player.timecomments.currentIndex < player.timecomments.comments.length){
			//console.log(comments.comment);
			player.timecomments.c_fired = true;	
			player.timecomments.currentIndex++;
		}
	}else{
		//console.log("WTH :O no comments ? ");
	}
} 




var timecomments = function(settings){
	
	myTimeComments = new TimeComments(this,settings);
	
}
videojs.plugin('timecomments',timecomments);