I've "Drupalized" Stanford's Annotated Video Player Using Cue Builder

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
kreynen's picture

Brian Chirls wrote this amazing Annotated Video Player for Stanford University. I took the code he shared and "drupalized" it by moving support for his Popcorn Base Plugins into a new Popcorn Base Plugins and adding support for rendering a list of Cues as the JSON required to populate the chapter links in a new Popcorn Chapters module.

I'm using the same approach as Popcorn Loader in that I'm passing the media entity id and "cue list" id. This allows different lists of cues to be rendered with the same media. You can see how Popcorn Chapters generates the same JSON...

http://popcorn.alittlehelphosting.com/popcorn-chapters/cue-as-json/1
http://popcorn.alittlehelphosting.com/popcorn-chapters/cue-as-json/2

as Brian's static JSON file...

http://www.stanford.edu/group/ruralwest/cgi-bin/projects/energyvideo/dat...

Rendering the Cues as JSON is being done with a custom function, but that will eventually be updated to use Views.

Put it all together are you get http://popcorn.alittlehelphosting.com/popcorn-chapters/load/5/1

For this demo I've uploaded the same videos used on the Stanford site and I'm not using the annotations yet. I'm currently assuming the .mp4, ogv, and webm are all available, but I'll change this to support/require the Media Derivatives API module and get the additional codecs needed for an HTML 5 playback for all major browsers from the Derivatives API.

There's plenty of CSS, Javascript, and PHP that can be cleaned up and I'm still assuming all of the Cues are chapters instead of defining the "cue type". We still need a hook for each popcorn plugin to declare itself and it's required fields, but this actually works as a solution for http://www.retn.org. While Popcorn Chapters is only using the chapter plugin, Popcorn Base should allow declare the existence of annotations and lowerthird types as well.

Anyone with an account on popcorn.alittlehelphosting.com can add new Cues with different start times and see their chapter markers in action. All the code has been committed