srt-player
srt-player copied to clipboard
A jQuery plugin for playing SRT files with HTML5 video.
jQuery SRT Player
The jQuery SRT player extends the capabilities of the HTML5 video player to be able to play SRT files in the browser. It's usage is meant to be as simple as possible. -- I will add a demo from the Accentivize site as soon as it is up.
Usage
In order to load SRT files on your HTML5 video, there are three steps.
Step 1: Include the jquery srt plugin
<script type="text/javascript" src="jquery.srt.js"></script>
Step 2: Call SRT on the video page and specify the options (discussed later on).
<script type="text/javascript">
$("video").srt();
</script>
Step 3: Specify an SRT file track from within the video attribute
<video ... srt-track="{your file}.srt">
Actually, this third step is optional, as you can simply specify the SRT file from the options that you pass into the .srt() call.
Usage with ‹audio› or ‹video›
An interesting consequence of this being completely built upon HTML5 is that it can also be used to play SRT files for ‹audio› elements as well. The steps for setting it up to do so are exactly the same as with a ‹video› element.
Options
srt_track
Instead of specifying the file as a track as an HTML attribute on your video element, you can instead specify it through an option passed into the jquery call.
default: Whatever you specify as the default
default_url
In order to specify a path or URL from which to load the SRT track (it's loaded with a jQuery AJAX get call).
default: ""
poll_time
The time interval (in milliseconds) which you wish to use as an interval to refresh the subtitles.
default: 100 -- I've found that for most SRT files this is sufficient. Feel free to specify anything smaller, but be warned the current subtitle is checked repeatedly after this amount of time, which could slow the user's browser.
srt_elem
The id on the page in which to place the subtitles. If this id doesn't exist, it is appended after the video element. Use this if you wish to build a custom video player.
default: subtitles -- Note: There is no leading "#" on this element!
Contributing
Feel free to make pull requests, submit issues, and give feedback from which this can be refined.
Authors
Joseph Barrow through Accentivize