Shayan's Software & Technology

My adventure as a Software Engineer continues..,

Integrating The WebVTT HTMLTrackElement into Mozilla Firefox on Windows 7 x64 bit


We have been hard at work trying to get the WebVTT Parser integrated into Mozilla Firefox! We have to accomplish this goal in steps. Before the actual parser can be integrated into the browser we need to include an old patch that Ralph Gilles, a developer, worked on for the WebVTT Specification. His patch involved incorporating the HTMLTrackElement into the browser DOM (Document Object Model).

The Track element is necessary because it allows subtitle and caption tracks to be specified in the <audio> and <video> HTML5 elements. This patch was built to support the old WebVTT parser that was originally authored by Ralph so we had to import his code after we applied the patch to an old version of Mozilla Firefox. Luckily this part was easy to do using an executable script. Then all we needed to do was to build the browser with the integrated code and check for the HTMLTrackElement.

Here is a Link to the patch that we integrated on BugZilla

Here is a link to the original WebVTT Parser Associated with this Patch:


We needed to have an instance of mozilla-central (mozilla firefox repository) available for us to use. We also needed to have an old commit of mozilla-central that was live near the date of March 14 2012 because the patch Ralph wrote was targeted for this specific version of Mozilla Firefox. Because I will building the specified version of Mozilla Firefox on Windows I had to use the MozillaBuild program with the MSVC2010 compiler.

Here is a link to mozilla-central the public GitHub repository for the Mozilla Firefox web browser:

Here is the GitHub commit hash that I used from the public mozilla-central repository:


In order to apply the patch to that particular commit I need to create a new branch that contains the old version of the browser code. we will call this new branch: ‘mozilla-old’ Here is the Git command to do this:

git checkout -b mozilla-old b984fc4495f6a4b2e44417168db4187a44514341


In order to integrate the patch with the track element i had to first check to see if the patch is going to merge correctly into the mozilla-old repository we need to ensure there wont be any errors when the patch is applied. the git command ‘apply’ has a check option to allow us to make this verification:

git apply –check track-element.patch

If there aren’t any errors displayed on the screen it indicates that the patch can cleanly merge. I ran the command git apply track-element.patch to apply the patch to the repository. The next thing we need to do is to add Ralph’s source files to the mozilla-old repository. Luckily, Ralph wrote a neat little script that pulls in that code from his repository. His script is located in: mozilla-central/media/webvtt. switch into the webvtt directory and run the script. It will create an ‘src’ folder within the webvtt directory and it will contain the WebVTT source code.

Now that we have everything we need in place it is time to compile the code and run the web browser. To compile the code run the following command in the msvc terminal after navigating to the mozilla-central directory:

build/pymake/ -f -j7

the ‘7’ after -j is the number of cores i used to compile the source code. I have an intel core i7 processor on my machine. you can use any number of available cores to compile the mozilla code.

Immediately after starting to compile the code I noticed some errors. These errors were associated with an incompatibility of the WebVTT code between different revisions of the C Programming Language. MSVC10 uses C98 compiler while the latest WebVTT code is compiled in C99. Therefore, I had to make some changes to webvtt.c and ensure that all variables are declared at the head of a function definition.

Upon recompiling I noticed another error with snprintf. I opened the file and replaced snprintf with PR_snprintf and #included the correct library. The code compiled successfully this time. Now it is time to run it and to check if the HTMLTrackElement exists in the browsers web console:

Here is an image of the HTMLTrackElement in Mozilla Firefox!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: