Chris KalafarskiOut with the Flash, in with the flashy

Chris Kalafarski posted on Tuesday, March 20th, 2012 | Audio, HTML5, Javascript

FlowPlayer has been PRX’s audio player of choice (ok, not really a choice) for a very long time. Even without a mobile-specific version of PRX.org, we’ve seen a dramatic increase in the number of requests for a way to audition pieces on an iPad. It’s simply a matter of people’s usage habits changing. While an HTML5 audio player has been on our radar since browsers began supporting the technology, demand finally reached a point where the transition became necessary.

There are several fairly robust open source projects out there to help with the switch. MediaElement.js and jPlayer were the two main contenders, with jPlayer winning out do to internal familiarity. Both work by having a Flash fallback option when the native HTML5/JavaScript handling in a given browser can support the file. jPlayer allows you to define multiple source files to help with browser coverage. Currently our catalog is mp3, which IE8 (and lower), Firefox, and Opera do not support natively. We would need to re-encode our entire catalog to ogg or WebM to provide native support there, which may happen at some point, but for now relying on the Flash fallback in jPlayer is a perfectly acceptable solution.

One major advantage of having a single player UI and having it built in HTML that will be consistent across all platforms and browsers regardless of what’s handling the audio is extensibility. Whereas previously we had slightly different Flash widgets for the main player, the popup window player, and the embeddable player, we now need to only maintain a single HTML file. The player is fluid, so it will resize to fit whatever space it is given. Adding additional features or elements to the player down the road will be an extremely simple process.

The move hasn’t been without issue. jPlayer has a few shortcomings that we’ve had to work around. The most significant being an issue with the way in which the Flash player reports file duration when the file is loading. It often fails to accurately estimate the total duration before the entire file loads. This can cause some unexpected behavior with large files. It was fairly trivial to work around, but it shows that supporting two vastly different technologies at the same time is not an exact science. There are a handful of finicky UI limitations with jPlayer as well. Want a vertical volume bar? Get ready to fork.

Performance as a whole, though, has been good. Even on some of our playlist pages which load up dozens of individual players, results from our testing has on par with or better than FlowPlayer.

We’re very excited about the prospects of having this new player out in the wild. Aside from the obvious benefits of iOS support, and the boost in street cred for having using more HTML5, there are likely some advantages we haven’t even considered yet. PRX hopes to help drive innovation in this space, so expect to see any improvements we make flow back into the community.

Old vs New:


Demo

9 Comments to Out with the Flash, in with the flashy

Lex
March 20, 2012

Great, good work. Really looking forward to trying your jPlayer-based player. Don’t want to force undue pressure, but do you have an ETA?

chris
March 20, 2012

Hey Lex,

We’ve actually already released it. You can see the new player in action on any PRX piece page, such as this episode of The Moth Radio Hour.

Let us know what you think or if you have any feedback!

[...] to know how we made this happen? Player developer Farski shares the process in Out With the Flash, In With the Flashy on PRX’s tech blog, PRX [...]

Jacob
March 21, 2012

Awesome, thanks for sharing and insights.

Paul
March 30, 2012

We’ve had an issue with loading files larger than 15MB on chrome – if the player is in a separate window, then chrome will not allow you navigate to another page on the main window. Did you run into that issue? If so, how did you solve it?

chris
March 30, 2012

Hey Paul,

We didn’t run into that issue, and when I just tested it out in Chrome with a piece with large audio files, the issue didn’t show up.

After doing some translation, the audio files are served directly from S3, which may be why we haven’t hit the issue. I suspect you’re running into the per-host connection limit, and the typical solution to that problem is to have a set of cnames (media1.domain.com…median.domain.com) which resolve to your asset host.

[...] has been blogging away about tech and innovation at PRX. Learn more about the projects behind our new audio player, a graphical pseudo-3d environment in our upcoming Android app, or PlayerHater: PRX’s way of [...]

[...] Transom uses a Flash player, with HTML5 audio fallback for iOS devices like iPad/iPhone. But it might be time to reverse that and default to HTML5 with a Flash fallback for Firefox and older browsers. That’s the route PRX took in their new embeddable player. [...]

[...] slideshow uses the versatile jPlayer (same as in PRX’s new audio player). That provides the text minutes-seconds counter and the progress [...]

Leave a comment

Support Us!

PRX

Categories & projects

Archives