#916 ✓ staged
Jon Buckley

canPlayType equivalent for Popcorn

Reported by Jon Buckley | February 14th, 2012 @ 07:16 PM | in 1.2 (closed)

So, this is an idea I've had germinating for a bit. Instead of having Popcorn(url), Popcorn.youtube(url), Popcorn.vimeo(url), Popcorn.someplayer(url), each player can have a "canPlayType" function, so that a developer can do Popcorn(url) and not worry about what kind of video is being loaded, let Popcorn players worry about that. This wouldn't replace the existing Popcorn.player behaviour, but overload the Popcorn ctor behaviour with additional functionality.

Does this idea resonate with anyone else? I'll try prototyping a patch.

Comments and changes to this ticket

  • Rick

    Rick February 14th, 2012 @ 08:37 PM


    We've already made concessions in the Popcorn constructor for players and agreed that the core would never have to "know" about players, but instead would just work. The "subclassed" nature of the player constructors also allows them to define a considerably different formal parameter list (eg. Popcorn.youtube("target id", "url"); ).

    That being said, you might be able to do this as a module somehow, but as the player constructors actually return a constructed instance of Popcorn(), there may be some recursion to watch out for.

  • David Humphrey

    David Humphrey February 14th, 2012 @ 08:57 PM

    I agree with Rick. Jon, help me understand your use case. Maybe there is a way to do what you're after without requiring players as a core functionality.

  • Scott Downe

    Scott Downe February 14th, 2012 @ 09:02 PM

    I can see this being a pretty nifty little module.

    Smartcorn( "url" );

    That will be smart enough to read the url, and fire off the appropriate Popcorn.player, if that player exists.

  • Brett Gaylor
  • Scott Downe

    Scott Downe February 15th, 2012 @ 10:20 AM

    Also, Jon was asking me yesterday if popcorn had a list of available players, kinda like the plugin registry.

    I don't think it does, but it probably should.

    Something like:


    That would only exist if the player module added it.

    Without a list of players, Smartcorn will need to maintain a whitelist of players. With that list, it can search through the players, looking for a function that the player provided to search the url, if valid, fire off that player.


    Smartcorn( "id", "youtube url" );

    Would turn into this:

    Popcorn.youtube( "id", "youtube url" );

    Two things will need to happen, the player module will need to expose a registry if it already is not, and players themselves will need a smartcorn function.

    I want to block this on the players being pulled into a module first.

  • David Humphrey

    David Humphrey February 15th, 2012 @ 10:31 AM

    I wonder if we want to consider a general solution to "addon" discoverability, such that one can query for all available modules, plugins, players, effects, etc. That's not this bug, but this bug might want that. I think we should consider this for all "addons" vs. something specific to players.

  • Scott Downe

    Scott Downe February 15th, 2012 @ 10:40 AM

    I was actually thinking that once player becomes a module, we might just make this module exist in the player module. It would only ever be needed with players anyway, and is pretty light weight, and will be out of core.

  • Scott Downe

    Scott Downe February 23rd, 2012 @ 05:47 PM

    • State changed from “new” to “assigned”
    • Assigned user set to “Scott Downe”
  • Scott Downe

    Scott Downe February 29th, 2012 @ 06:49 PM

    • State changed from “assigned” to “peer-review-requested”
    • Assigned user changed from “Scott Downe” to “Jon Buckley”


    I just added this functionality to the player module.

    We can now implement a _canPlayType function in the player.

    Popcorn.player( "coolNewPlayer", {
      _canPlayType( nodeName, src ) {
        // return true if this player can exist in that node type, and the src is valid
      _setup() {}
    var p = Popcorn.smart( "#id", "url", {
      onerror: function( e ) {
        // there was nothing valid smartcorn could do with this

    It first attempts to use a html5 video, if there is no source, and was passed a video element. Just like normal popcorn.

    Then attempts to find a player, if it does, it uses it.

    If it does not, it attempts to attach the supplied source to a new video element, appends it to the target. If this fails, it will call the oneerror callback, notifying the called that nothing can be done. This usually happens when you do not have a video element, and the url is nonsense.

  • Scott Downe

    Scott Downe February 29th, 2012 @ 06:58 PM

    Oh, also.

    I exposed the canPlayType function.

    Popcorn.youtube.canPlayType( nodename, url );

    This will return true or false or undefined.

    true, the url and node are valid.

    false, they are not valid,

    undefined, this player does not implement the canPlayType function. Inconclusive if it can play it or not.

  • Jon Buckley

    Jon Buckley March 2nd, 2012 @ 03:48 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Jon Buckley” to “Scott Downe”
    • Milestone order changed from “55” to “0”

    I want pull request reviews back :(


    • line 4 is missing a var declaration
    • line 228 is assigning Popcorn[ name ] = Popcorn[ name ] ? That seems unnecessary.
    • line 264; why not bail early when the first valid player is found, rather than looping for every single one? then you get a consistent behaviour, and it'll be (slightly) faster
    • line 266 don't make the explict comparison to true
    • line 289 an extra \ at the end
    • It'd be neat to see if this is compatible with IE8, but that's not a blocker

    players/vimeo/popcorn.vimeo.js & players/youtube/popcorn.youtube.js:

    • Can you refactor both of these players to internally use the _canPlayType method so that we're not potentially messing up regex's?
  • Jon Buckley

    Jon Buckley March 2nd, 2012 @ 03:48 PM

    Also, I want a ticket for documentation of these methods

  • Scott Downe

    Scott Downe March 2nd, 2012 @ 04:35 PM

    "line 228 is assigning Popcorn[ name ] = Popcorn[ name ] ? That seems unnecessary."

    This is so we don't replace a player already defined with that name. We could probably get away with doing that check at the very start, and returning early, but that is another ticket, as that was there before this ticket's changes.

    The reason I do not return early is because I am inside of a Popcorn.forEach, so if I were to call return, wouldn't my return be for the internal function that is going into the forEach. I will look into it though. I agree, it would be ideal to return early.

    I will fix up the rest.

  • Jon Buckley

    Jon Buckley March 2nd, 2012 @ 04:43 PM

    Nah, just fix it in this ticket: if ( player[name] ) { return; }

    This might be what you want to return early: https://developer.mozilla.org/en/JavaScript/Reference/Global_Object... . You'd need to implement a shim for IE8 though, but es5-shim has you covered: https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js#L321

  • Scott Downe

    Scott Downe March 2nd, 2012 @ 06:03 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “Scott Downe” to “Jon Buckley”
  • Scott Downe

    Scott Downe March 2nd, 2012 @ 06:05 PM

    I just did a simple for in loop, and check hasOwnProperty. That is ie8 complaint I believe: http://msdn.microsoft.com/en-us/library/windows/apps/328kyd6z%28v=v...

  • Jon Buckley

    Jon Buckley March 4th, 2012 @ 12:13 PM

    • State changed from “peer-review-requested” to “super-review-requested”
    • Assigned user changed from “Jon Buckley” to “David Seifried”


  • David Seifried

    David Seifried March 4th, 2012 @ 01:19 PM

    • State changed from “super-review-requested” to “review-looks-good”
    • Assigned user changed from “David Seifried” to “cadecairos”


  • Jon Buckley

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

Referenced by