Video frames bar

by Anupama

HTML

<div id="videoRailsComponent"></div>

JavaScript

/* i/p properties */
var videoRailsWidth = 320,
	videoRailsHeight = 50;
var videoDuration = 15;
var frameImages = ["http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00006.jpg", "http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00005.jpg", "http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00004.jpg", "http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00003.jpg", "http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00002.jpg", "http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00001.jpg", "http://adtools-a.akamaihd.net/videoads/prod/4028cb972f813911012f919d14c200eb/videos/c5fc49ca-b00d-4db6-8de0-05d8d966c348/video.480p.mp4_thumbnail_00006.jpg"];
var noOfFrames = 7;

/* computed properties */
var frameWidth = (videoRailsWidth/noOfFrames).toFixed(2);
var frameHeight = videoRailsHeight;
var frameOffset = Math.floor(videoDuration/noOfFrames);

/* helper methods */
var createElement = function(elemType) {
	return document.createElement(elemType);
};

var seekVideo = function(event) {
	var target = event.target.parentElement;
	var frameId = target.getAttribute("data-id");
	if(frameId) {
		var videoSeekPosition = frameId * frameOffset;
		console.log("seek:"+videoSeekPosition);
		/* video.setAtrribute("seek", videoSeekPosition); */
	}
};

var createRailsComponent = function() {
	var videoRailsComponent = createElement("div");
	videoRailsComponent.setAttribute("id",...