#922 feedback-requested

Methods for checking fine-grained browser compatibility

Reported by brianchirls | February 22nd, 2012 @ 11:17 PM | in 1.4

There is a wide range of reasons why Popcorn or any of its modules, plugins and players might not work beyond simple support for HTML5 <audio> and <video> tags. In order to encourage graceful degrading, I propose augmenting the API with methods to report which components are failing and why.

An author may decide that certain components are optional and still allow the composition to play but without the incompatible tracks. On the other hand, some content might be essential, so incompatibility would result in an instructive error message that describes how to fix the issue (e.g. try a different browser, upgrade your video drivers, etc.).

Some examples of failing components:

  • Popcorn fails globally in IE7
  • chroma key plugin fails when WebGL is unsupported by browser or by GPU drivers
  • a player plugin requires Flash, but Flash is not available
  • a plugin that plays additional video content won't work on iOS
  • a plugin requires advanced features of WebGL. e.g. WebGL works but doesn't support OES_texture_float

Upon loading, the Popcorn core would test for basic essential functionality (i.e. the ability to set up event listeners that may not be sufficient in IE <= 7). Each plugin or player would be allowed to implement an additional incompatible method, which is run at load time, and the result is cached. If the method is missing or returns a "falsey" value, the component is assumed to be compatible. Otherwise, the component should return an error message (which is "truthy"). If any plugin returns an error, any track events on that plugin should be skipped (though they should probably still be stored).

An incompatible (or maybe incapable?) method would be added to the Popcorn constructor and to each instance, functioning as follows...

  Popcorn.incompatible(); // "static" method

Returns false if core functionality exists, otherwise returns an error message as string.

  Popcorn.incompatible('chromakey'); // "static" method with string

Returns false if the "chromakey" plugin is compatible (i.e. able to create WebGL context). Otherwise, returns an error string.

  var popcorn = Popcorn('#video');
  popcorn.subtitle({ /* ...data... */ });
  popcorn.chromakey({ /* ...data... */ });
  popcorn.videoPopup({ /* ...data... */ });
  popcorn.incompatible(); // "instance" method

When called on a Popcorn instance, incompatible will return an object showing which components have failed and an error message for each one. The above example, run on an iPad, might return an object that looks like this:

    "chromakey": "Your browser does not support chromakey. Please try a WebGL-capable browser, such as Firefox or Chrome.",
    "videoPopup": "Your browser does not support multiple videos."

I would also be open to replacing the text error message with a code of some kind so the author can index them more easily and write their own error message.

For reference, I implemented something similar in Seriously.js, as described in the wiki.

Comments and changes to this ticket

  • brianchirls

    brianchirls February 22nd, 2012 @ 11:21 PM

    A couple more things I forgot...

    The method called on an instance with a string argument would be the same as when called on the constructor.

      popcorn.incompatible('chromakey'); //same thing

    Also, when testing a plugin that has not been loaded, return either true or a fixed error message.

      Popcorn.incompatible('fake-plugin'); //true or 'not-found'
  • Scott Downe

    Scott Downe October 16th, 2012 @ 11:28 AM

    • State changed from “new” to “feedback-requested”
    • Assigned user set to “brianchirls”
    • Milestone set to 1.4
    • Milestone order changed from “78” to “0”

    This sounds like a module to me.

    Popcorn, at its core, is about a few core things, in this order.

    1. Ability to time an arbitrary event to an HTML5 (custom players are not part of core) media.
    2. Ability to extend popcorn with plugins and modules.
    3. Ability to run HTML5 media methods. This is p.play, pause etc.
    4. Media events. This is p.on.

    I may be missing something here, but the reason behind this is to keep the core to its core essentials. Core essentials are things that cannot function as modules, as they have dependencies on each other, things that we otherwise cannot function without, or easy access to the HTML5 media.

    If I don't have a need for something that is obviously useful, but not essential, should I have to load it?

    I think of Popcorn as less of a traditional library of "here is a bunch of useful things that make your life easier" to "here is the easiest way to time events onto media"

    If there is code in core that has zero access points from inside core, it probably shouldn't be there.

    Now, all that said, that list of 4 is a working list and something that is not finalized. Once finalized, to change it, it should first be made as a module, adopted, and a case that everyone is going to use it. Also, once finalized, we're going to review the existing popcorn core, and remove existing core features into modules.

    Think of core as one single module. Also, putting this in a release as otherwise no one'll see it.

  • brianchirls

    brianchirls October 17th, 2012 @ 01:16 PM

    I'll take a crack at building it as a module. Any ideas are welcome.

  • brianchirls

    brianchirls January 4th, 2013 @ 10:51 AM

    • Assigned user cleared.

    This is here if anybody wants to use it. Seems to be working pretty well.


Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins