Popcorn Source Code Plugin
This article was published more than two years ago. This means the content may be out of date or no longer relevant. You should verify that any technical information in this article is still current before relying upon it for your own purposes.
Last week I heard about popcorn.js, a Mozilla project to bring interactivity to videos on the web. It’s a really interesting idea and one I can see actually being used. Being able to pull in Tweets, show a Google Map or a Wikipedia article without having to leave the video, is something that can add a lot to a video. There are multiple plugins available and you have the ability to write your own (though documentation is a little sparse).
One of the uses I thought of right away was code tutorials. You should display the source code you are talking about and then what that source code does. With the webpage plugin, you can easily show an example, but displaying source code is a little more difficult. With the available plugins, there’s not really a good way. So I dived in to what documentation there is on writing plugins and came up with the Popcorn Source Code Plugin. Make sure this goes after popcorn.js and before your script.
| /** | |
| * Popcorn SourceCode Plugin v0.1 | |
| * http://mattwritescode.com/2011/11/popcorn-source-code-plugin/ | |
| * | |
| * Copyright 2011 Matthew Loberg (http://mloberg.com) | |
| * Licensed under the MIT license | |
| * | |
| * Description: | |
| * Add source code pre/code element to the page. | |
| * If Google Code Prettify <http://code.google.com/p/google-code-prettify/> | |
| * is available, it will style the code. | |
| * | |
| * Options: | |
| * - Start: time you want the code to display | |
| * - End: time you want the code to hide | |
| * - Target: the id of the element you want the code to appear in | |
| * - Code: the source code to display | |
| * - Lang: the source code language (optional) | |
| * | |
| * Example: | |
| var p = Popcorn("#video") | |
| .sourceCode({ | |
| start: 5, // seconds | |
| end: 15, // seconds | |
| target: 'codeExample', | |
| code: '<?php echo "foo";?>', | |
| lang: 'php' | |
| }) | |
| */ | |
| (function(Popcorn){ | |
| Popcorn.plugin("sourceCode", { | |
| _setup: function(options){ | |
| var target = document.getElementById(options.target), | |
| code = options.code.toString().replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); | |
| options._container = document.createElement("pre"); | |
| options._container.style.display = "none"; | |
| options._container.innerHTML = '<code class="prettyprint ' + options.lang + '">' + code + '</code>'; | |
| if(!target && Popcorn.plugin.debug){ | |
| throw new Error("target container doesn't exist"); | |
| } | |
| target.appendChild(options._container); | |
| }, | |
| start: function(event, options){ | |
| if(typeof prettyPrint == 'function') prettyPrint(); | |
| options._container.style.display = "block"; | |
| }, | |
| end: function(event, options){ | |
| options._container.style.display = "none"; | |
| }, | |
| _teardown: function(options){ | |
| document.getElementById(options.target).removeChild(options._container); | |
| } | |
| }); | |
| })(Popcorn); |
| /** | |
| * Popcorn SourceCode Plugin v0.1 | |
| * http://mattwritescode.com/2011/11/popcorn-source-code-plugin/ | |
| * | |
| * Copyright 2011 Matthew Loberg (http://mloberg.com) | |
| * Licensed under the MIT license | |
| */ | |
| (function(x){x.plugin("sourceCode",{_setup:function(a){var b=document.getElementById(a.target),c=a.code.toString().replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");a._container=document.createElement("pre");a._container.style.display="none";a._container.innerHTML='<code class="prettyprint '+a.lang+'">'+c+"</code>";if(!b&&Popcorn.plugin.debug){throw new Error("target container doesn't exist")}b.appendChild(a._container)},start:function(a,b){if(typeof prettyPrint=="function")prettyPrint();b._container.style.display="block"},end:function(a,b){b._container.style.display="none"},_teardown:function(a){document.getElementById(a.target).removeChild(a._container)}})})(Popcorn); |
| var p = Popcorn("#video"); | |
| p.sourceCode({ | |
| start: 5, // display at 5 seconds | |
| end: 15, // hide at 15 seconds | |
| target: 'source-code', // target element's id | |
| code: "<?php echo 'foo';?>", // code to display | |
| lang: 'php' // source code language | |
| }); |
You can also get the minifed version.
If you haven’t used Popcorn yet, I recommend checking out A Look at Popcorn over at Nettuts+.
Using the Popcorn SourceCode Plugin
To create a Source Code Popcorn event, simple use the sourceCode
var pop = Popcorn("#video");
pop.sourceCode({
start: 5, // when to start display
end: 15, // when to stop display
target: 'source-code', // element's id
code: "<?php echo 'foo';?>", // the source code
lang: 'php' // optional
});As you can see, it’s really simple to create a sourceCode popcorn event.
Pretty Code
If you have Google Code Prettify included on the page, it will make a call to prettyPrint() and style your code.
That’s All
Check out my plugin, give some feedback, suggestions, fork the Gist, and leave a comment below.
Comments? I'm @mloberg on Twitter.
