Highlighting text as my video plays

JavaScript
1

I am trying to highlight some text below my video as the video plays. Right now, when I click play, all of the text highlights in yellow. Can anyone help me? Thanks in advance!

HTML:

<div id="subtitles">
	<p>
		<span id="l1" class="line" data-end="00:00:04.130" data-start="00:00:00.240">Now that we've looked at the architecture of the internet, let's see how you might</span>
		<span id="l2" class="line" data-end="00:00:07.535" data-start="00:00:04.130">connect your personal devices to the internet inside your house.</span>
		<span id="l3" class="line" data-end="00:00:11.270" data-start="00:00:07.535">Well there are many ways to connect to the internet, and</span>
		<span id="l4" class="line" data-end="00:00:13.960" data-start="00:00:11.270">most often people connect wirelessly.</span>
		<span id="l5" class="line" data-end="00:00:17.940" data-start="00:00:13.960">Let's look at an example of how you can connect to the internet.</span>
	</p>
</div>

CSS:

 .current {
   background-color: yellow;
}

JAVASCRIPT:

var lines = document.getElementById("subtitles").getElementsByTagName("span");
var now = video.currentTime;

	// Update the progress bar as the video plays
	video.addEventListener('timeupdate', function() {
		// highlight text as video plays
		for (var i = 0, l = lines.length; i < l; i++) {
		  if (now >= lines[i].getAttribute("start") &&
		      now <= lines[i].getAttribute("end")) {
		    lines[i].className = "current";
		  } else {
		    lines[i].className = "";
		  }
		}
	});
2

Your javascript is looking for start and end, but your attributes are data-start and data-end

3

I thought that would fix it too but then nothing highlights when the video is played

4

I would check what’s in the now variable then…it’s probably not what you’re expecting…

5

When I play the video the now variable returns the current time.

6

Well, something isn’t what you think it is. Use the debug tools to find out what’s actually in those three values, or go old school and put them into an alert. It might be a data type issue (one is being treated like a date and the others aren’t)

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.