Example

Here is a simple example of a HTML5 video tag with a <track> tag. VideoSub finds the video on pageload and loads the subtitle file which will then automatically be displayed when the video is played. Also check out what happens when you move the playhead with the mouse.

The raw video (.MP4)
The subtitle file (.SRT)

Code

Here is the code for the web developer who just wants this to work:

JavaScript: 


<script src="includes/videosub-0.9.9.js"></script>

HTML: 


<video controls="controls" width="320" height="176">
	<source src="jellies.mp4" type="video/mp4" /><!-- WebKit -->
	<source src="jellies.ogg" type="video/ogg" /><!-- Firefox / Opera -->
	<track src="jellies.srt" kind="subtitle" srclang="en-US" label="English" />
	Your browser does not support HTML5 video.
</video>

That's all you need! There are NO outside dependencies.

Ports: There is a jQuery port of the older version 0.9.6 on GitHub - the port is called jquery-videosub by Max Wheeler.

Limitations for version 0.9.9:

  • Only works with SRT format subtitles - in the future VideoSub will provide basic WebVTT support for older browsers
  • Only supports a single <track> tag, ignores any further tracks after the first one in a video tag
  • Ignores "kind" property of tracks

Download

VideoSub is licensed under MIT - copyright Thomas Sturm. The contained Ender framework is licensed under MIT - copyright 2012 Dustin Diaz & Jacob Thornton http://ender.no.de/

VideoSub on GitHub

Or Download VideoSub 0.9.9 Here

Version History:
v0.9 (June 24, 2010): Initial public version of VideoSub
v0.9.5 (June 26, 2010): Added font scaling for videos that are more than 400 pixels wide
v0.9.6 (February 10th, 2011): Updated VideoSub to work with MooTools 1.3
v0.9.9 (August 23rd, 2012): Comes with integrated Ender framework, no outside dependencies

Discussion

Name *:        Email *:       

Sorry, but we have to trick the spambots... How much is 2+1? *:

URL:
SUBMIT
no comments yet...