Software by Steven

Tag: popcorn

  • Online and on Popcorn Parsing

    After a hiatus from the internet that seemed far longer than the month it actually was, I’m back online.

    I’m looking to continue my work on popcorn.js’s parser support, specifically with cleanup and adding styling support. After a refactoring and code preparation for what is to come, I’m ready and read up enough to begin. Of the three parsers in popcorn.js which support in-spec styles, I’ve decided to focus on the TTML parser over the other leading candidate for a first convert, SSA/ASS.

    As with all the parser styling support, this will be a task of mapping the spec styles to CSS. While the TTML spec is significantly (read: magnitude of 10) larger than the SSA/ASS spec, it should be easier because the style names and behaviours are so similar to what I have to work with in the browser (JavaScript and CSS). In fact, near the beginning of the TTML spec Styling section, the W3C advises:

    In particular since [CSS2] is a subset of this model, a CSS processor may be used for the features that the models have in common.

    That’s perfect! TTML is an XML-based format, so parsing is already made easier by JavaScript’s XML and DOM facilities. This means that after extracting what I need to, I can minimize the work involved with mapping and validating style names and attributes, instead passing them through to the browser for validation and processing. It’s not all easy, however. Some extra rules will need to validated, such as style inheritance from other styles, invalid/inaccessible inheritance, and ensuring styles are applied to the appropriate elements.

    I’ve already started by parsing some basic region and style data (TTML’s equivalent to CSS classes), and structuring some unit tests. What remains at this point is extracting inline styles, and applying all styles to the displayed text. And, of course, validation rules, further unit tests, demos, and tackling any as-of-yet-unforeseen issues. It’s already looking to be a fun, wild project.

    Look for further developments!

  • Popcorn and Soundcloud

    Recently, Popcorn.js began to support custom players. When Henrik Moltke started a conversation going to get Soundcloud working with Popcorn, beautiful things started to happen. Soundcloud and Popcorn developers collaborated to create a Soundcloud player as well as some great plugins. Watch out for upcoming work from Henrik, Mark Boas and more as Mozilla’s Hyper Audio project continues: they’ve been cooking up some great works and demos. The union of Popcorn.js, Soundcloud, Radiolab, combined with Henrik, Mark and many others has produced a great Radiolab Player demo. For my own part in the process, working with everyone has been terrific.

    Popcorn 0.5 has also come out today, and includes some of the results of this effort. A custom player for use with Soundcloud has landed, which can be used with Popcorn simply, like so:

    var popcorn = Popcorn( Popcorn.soundcloud( "contentId", "http://soundcloud.com/fitn/cotton-in-the-ears" } ));

    Using the Soundcloud player with Popcorn like this will place Soundcloud’s player inside the HTML Element on the web page with the corresponding id “contentId”. The Soundcloud player will then play the track found at “http://soundcloud.com/fitn/cotton-in-the-ears”. This can then all be controlled through Popcorn, complete with timed track events. Be sure to check it and more out in the new release.

  • Defining your own HTML5 Video Object

    With the introduction of HTML5, the <video> element offers a great deal of flexibility and scriptability to web-based video technologies. Popcorn.js takes this and runs with it, allowing everything on the page to work with a video to create great interactive webpages. Just check out what secretrobotron has made to see what I’m talking about. This can be taken further if you wrap non-HTML5 video sources so that they appear to look and act like HTML5 video.

    I’ve been doing a lot of twiddling with this lately, and see lots of applications for it. A simple example is a slideshow, made up of an array of images timed to change every, oh, five seconds or so. This is no different from an ordinary video where thousands of images change at a rate of 24 or more times per second. If this ordinary array of images were wrapped to look like a video, it could then be tied into Popcorn and let loose. Not only could a slideshow be started, stopped and seeked through but other neat options begin to open up.

    What if we want to dynamically caption the slide show images? What if we want to cue an <audio> element to play a sound for different sections of the slide show? What if we want to show additional information about the images or author like Twitter, Google Maps or more? This functionality is readily-available through Popcorn’s plugins. But if we really want to get creative…

    We could make one of the images in the slide show actually be a <canvas> element hosting a Processing.js sketch which plays for a few seconds in the middle of a slideshow. In that Processing.js sketch we could then have JavaScript that runs completely independent of Popcorn but may interact and control it to create a relationship where the player and video feed off of each other. We could also simplify things and just go back to our array of ordinary images but increase the cycling time from once every 5 seconds to once every 1/24 of a second to create fluid motion. Doing this would emulate a video in every sense, but 100% dynamic images means 100% dynamic video content.

    Eventually, I see the only limit being imagination.

    HTML5 Video (like HTML5 Audio) implements a standard interface called “HTMLMediaElement”. You can check out the spec here. To get a video-like object going, all one has to do is have a JavaScript object define the methods and attributes of this interface. Such is the nature of open web, where innovation only requires knowledge and expectation of an interface. While some work in this area has been done for the 0.4 version of Popcorn (out now), the real playground will open for the 0.5 release where it will be as easy to create custom “player plugins” as it is right now to make ordinary plugins.

    Time to start getting inspired.

  • More subtitle formats for Popcorn.js

    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.

  • Popping up TTXT Support for Popcorn.js

    In a past blog, I discussed some work I’ve had with the GPAC’s TTXT subtitle standard. I’ve begun working on Popcorn.js and after not  too much work, Popcorn is beginning to gain TTXT support. While this would’ve been much more work before the 0.2 re-engineering, plugins are now supported and it’s as simple as registering a parser function for a specific file extension.

    What does this mean?

    For developers, it’s easy to add onto popcorn. Their page covers just about everything you could need to know, and once you learn the intuitive API it’s all systems go. For this initial TTXT support it was as simple as using the existing subtitle plugin and writing a custom parser to convert a TTXT file into subtitle objects. Probably about 40 executable lines of code needed in all.

    For Popcorn.js users, I can see this being quite advantageous as well. With the ease of adding functionality, new features are able to be developed quickly and with minimal impact on what’s already in use by Popcorn.js. This means the web pages using Popcorn can only get more dynamic as time goes on.

    Back to TTXT: It is a robust standard. I’ve studied the spec and am beginning to learn it all, but thus far only the text information from a file is processed; not the styling information One of the benefits of TTXT is it’s rich support for styles down to a per-subtitle, per-character level. This means one subtitle can be half 12pt Arial font, half 36pt Courier. Another subtitle could be all Verdana and in red, except for a desired letter to be blue. This styling information is what I’m least familiar with about the standard.

    My friend Anna has already put the call out if anyone has some more complicated TTXT files to contribute to be studied and run by our parser. I’d like to re-issue the call here, and would be interested in hearing from any developers or film makers who have more familiarity with this standard.