wiegand/jsbin.luzeseyi.css

## jsbin.luzeseyi.css
body {
  font: 14px Helvetica;
}

#info {
  padding: 1em;
  margin: 1em 0;
  background-color: #eee;
  border: 1px dashed rgba(0,0,0,0.10);
}

video {
  border: 1px solid rgba(0,0,0,0.2);
}

button {
  border: 0;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border: 1px solid rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.60);
  cursor: pointer;
}

.selected {
  font-weight: bold;
}

.token {
  cursor: pointer;
}

## jsbin.luzeseyi.html
<!DOCTYPE html>
<html>
<head>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <video width="250">
    <source src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
  </video>

  <section id="controler">
    <button id="play">▶︎</button>
    <button id="stop">◼︎</button>
  </sections>

  <div id="info">
    Information will go here
  </div>

</body>
</html>

## jsbin.luzeseyi.js
$(function() {
  var video = $("video")[0],
      info = $("#info"),
      rawData = [
        {word: "That", time: 0.235},
        {word: "is", time: 1.454},
        {word: "not", time: 8.221}
      ],
      data = _.map(_.zip(rawData, _.rest(rawData)), function(compound) {
        var rangeEnd = compound[1] ? compound[1].time : compound[0].time + 1.2;
        return {word: compound[0].word, time: compound[0].time, range: [
          compound[0].time, rangeEnd
        ]};
      }),
      render = function(time) {
        info.text("");
        _.each(data, function(datum) {
          var token = $("<span>" + datum.word + " </span>");
          token.click(function(e) {
            video.currentTime = datum.time;
          }).addClass("token");
          if (active(time, datum)) token.addClass("selected");
          info.append(token);
        });
      },
      active = function(time, datum) {
        var isCurrent = time < datum.range[1] && time >= datum.range[0];
        return isCurrent;
      };

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

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

  $(video).on("timeupdate", function(e) {
    var time = video.currentTime;
    render(time);
  });

  render(0);

});

// That is not dead which can eternal lie. And with strange aeons even death may die.
	body {
	font: 14px Helvetica;
	}

	#info {
	padding: 1em;
	margin: 1em 0;
	background-color: #eee;
	border: 1px dashed rgba(0,0,0,0.10);
	}

	video {
	border: 1px solid rgba(0,0,0,0.2);
	}

	button {
	border: 0;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	background-color: #eee;
	border: 1px solid rgba(0,0,0,0.10);
	color: rgba(0,0,0,0.60);
	cursor: pointer;
	}

	.selected {
	font-weight: bold;
	}

	.token {
	cursor: pointer;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<video width="250">
	<source src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
	</video>

	<section id="controler">
	<button id="play">▶︎</button>
	<button id="stop">◼︎</button>
	</sections>

	<div id="info">
	Information will go here
	</div>

	</body>
	</html>
	$(function() {
	var video = $("video")[0],
	info = $("#info"),
	rawData = [
	{word: "That", time: 0.235},
	{word: "is", time: 1.454},
	{word: "not", time: 8.221}
	],
	data = _.map(_.zip(rawData, _.rest(rawData)), function(compound) {
	var rangeEnd = compound[1] ? compound[1].time : compound[0].time + 1.2;
	return {word: compound[0].word, time: compound[0].time, range: [
	compound[0].time, rangeEnd
	]};
	}),
	render = function(time) {
	info.text("");
	_.each(data, function(datum) {
	var token = $("<span>" + datum.word + " </span>");
	token.click(function(e) {
	video.currentTime = datum.time;
	}).addClass("token");
	if (active(time, datum)) token.addClass("selected");
	info.append(token);
	});
	},
	active = function(time, datum) {
	var isCurrent = time < datum.range[1] && time >= datum.range[0];
	return isCurrent;
	};

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

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

	$(video).on("timeupdate", function(e) {
	var time = video.currentTime;
	render(time);
	});

	render(0);

	});

	// That is not dead which can eternal lie. And with strange aeons even death may die.