Content synchronization with HTML5 videos Part 2

Hi everyone

In my previous post I described about how things working out in video editor special page. From this post I will talk about how videos getting viewed synchronized with other content.

As I previously mentioned, I am using a JavaScript library called Popcorn. By using it, we can capture the time events from HTML5 videos. 

In the special page for video viewing, I will read data saved in MySQL database and generate a JavaScript to play content data. Following is a sample generated JavaScript for a particular video.

	document.addEventListener("DOMContentLoaded", function () {
	var popcorn = Popcorn("#ourvideo");
	popcorn.footnote({
	start: 1,
	end: 6,
	target: "footnote",
	text: "Sample 1 content here"
	});
	popcorn.footnote({
	start: 6,
	end: 7,
	target: "footnote",
	text: "Sample 2 content here"
	});
	popcorn.footnote({
	start: 11,
	end: 19,
	target: "footnote",
	text: "Sample 3 content here"
	});
	popcorn.footnote({
	start: 19,
	end: 5000,
	target: "footnote",
	text: "Sample 4 content here"
	});
	}, false);

view raw contectsync2.js hosted with ❤ by GitHub

In this script, start and end attributes specifies the starting and ending time of the value of text attribute which will appear inside the div tag. This div tag will have the id footnote. Values for text attribute will be in HTML format taken from MySQL database.
You can download my source code for the complete extension form here.