A lot of new features landed in this release.
In no particular order:
1. Players have a _teardown function a lot like a plugin. Example:
Popcorn.player( "youtube", {
_setup: function( options ) {},
_teardown: function( options ) {}
});
So _setup is called when a new youtube player is created by doing Popcorn.youtube( “id”, “url” ), now _teardown will be called when destroy is called on the created player by doing p.destroy(). All track events and event listeners are cleaned before the _teardown, the idea it to just reverse what you did in _setup.
2. Popcorn.smart is a new function that tries to find the appropriate player for you. Example:
Popcorn.smart( "id", "url" );
Pretty simple, but if id is a video element, and url a valid HTML5 media, a regular old HTML5 video will be setup with popcorn. If the id is a div element, and the url a youtube, it will instead setup a youtube player.
3. Popcorn _canPlayType is a new player feature that is used by Popcorn.smart.
When you create a player, you can define a canPlayType function. Example:
Popcorn.player( "youtube", {
_setup: function( options ) {},
_canPlayType: function( nodeName, url ) {}
})
The _canPlayType accepts a node name that the player should be playable on. This is usually a html element, and a url, which is the url to the media to be loaded into the node. This function then return true if it can play, false otherwise. If this function does not exist on a player, undefined is returned instead.
To call this function, you do this Popcorn.youtube.canPlayType( “div”, “youtubeurl” );
4. Track event toString functions. Now, once you have a reference to a track event, you can call toString on it. This will return a string of the default data on any track event, usually the start, end and target. You can also add a toString method to the plugin when the plugin is being written, to better handle what to do with non default data. Example:
Popcorn.plugin( "something" , {
_setup: function( options ) {
options.toString = function(){
return options.start + ", " + options.end + ": " + options.foo;
},
start: function( event, options ){
},
end: function( event, options ){
},
_teardown: function( options ) {
}
});
5. We have moved players parsers and locale out of the core, and into modules. You include them much like you include a plugin, and from there on in, everything else is the same. Example:
<script src="popcorn.js"></script>
<script src="popcorn.player.js"></script>
<script src="popcorn.youtube.js"></script>
<script src="popcorn.subtitle.js"></script>
<script>
Popcorn( function() {
Popcorn.youtube( "id", "url" ).subtitle({
start: 10,
end: 20,
text: "hello world"
});
});
</script>
6. We now have a shim to support ie8. This is only supported for the youtube player. Some plugins do work, like subtitle and footnote, but that was just a coincidence, and not something we are testing for, yet. We will improve our support for this over time. To include the shim, you have to include it before you include popcorn, like so:
<script src="popcorn.ie8.js"></script> <script src="popcorn.js"></script> <script src="popcorn.player.js"></script> <script src="popcorn.youtube.js"></script>
7. All our plugins have had their manifests updated to supply options flags. This is useful for programmatically reading plugins dynamically. If someone uploads a plugin, and a program reads it in, it may want to know this information regarding options and mandatory data. Popcorn-maker is going to be using this soon. The idea will be when you click a track event to edit it, these will be a collapsible container with all the optional options. This makes a new plugin far less overwhelming, and easier to get at the important data quickly.
8. You can now supply events into a custom players option object. This is useful for listening to things that can happen during the creation process of the player. Example:
Popcorn.youtube( "id", "url", {
events: {
"error": function( e ) {}
}
})
The error function will be called if for whatever reason, the player did not setup properly. This is also useful for knowing if popcorn.smart failed. Example:
Popcorn.smart( "invalidid", "nonsenseurl", {
events: {
"error": function( e ) {}
}
})
So, the above id and url do not match any players, and is not a valid HTML5 media, the error function will be called. You can also put any other event in here, like canplaythrough, loadeddata, play, etc.
Scott Downe's Blog 