What began as a custom subtitle command is growing into a larger amount of work on Popcorn.js. While initially work was being done to include TTXT subtitle support, support for many more standardized formats will soon be popping into Popcorn. This is inspired by the Universal Subtitles project, which supports a variety of formats. As a combination of efforts between Simon and myself, we’re also working on creating parsers for:
One caveat in this wide support is that, like TTXT before them, the initial implementation will have much of the style information being ignored for now. This won’t affect SBV or standard-compliant SRT files, but the remaining will have their styling information stripped from them… for now. We hope to be supporting style information soon, however. In the mean time those formats that support HTML-compliant in-text styling information will work courtesy of the browser’s native display capabilities.
For example, since many media players have expanded on the basic SRT support to handle underlining with the <u></u> tags, existing SRT files with these tags will not break. However, SSA-style commands, which follow a syntax like this:
{\commandArg1} or {\command(Arg1,Arg2,…)}
are also found in SRT files. Even though styling these tags is not immediately supported, the commands still won’t show up as part of the subtitle text: they will be hidden from view. So if you have a subtitle file and want to use it, what do you do? Just include popcorn, the parser plugin and the subtitle plugin in the web page like so:
<head> <script src="../../popcorn.js"></script> <script src="../../plugins/subtitle/popcorn.subtitle.js"></script> <script src="popcorn.parserSRT.js"></script> </head>
These files will register all the appropriate code with popcorn, meaning all that’s left is to specify the subtitle file. This is done on the video element via the data-timeline-sources attribute:
<video id='video' controls data-timeline-sources="data/data.srt" > <source id='mp4' src="../../test/trailer.mp4" type='video/mp4; codecs="avc1, mp4a"'> <source id='ogv' src="../../test/trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
And with that bit of work, Popcorn will do what it does best, which is to take care of the rest.
Leave a Reply