Archive for the Uncategorized Category

Image cropping in Popcorn Maker

Posted in Uncategorized on September 18, 2013 by scottdowne

Image cropping has just landed in Popcorn Maker.

Previously, there was no way to get an image to fill the screen if its aspect ratio did not match, it was also impossible to only show part of an image.

Now, you can stretch, fill and crop images.

Step 1 is to add an image track event.


You’ll notice it fills its space, and adds white to either side to fill up the aspect ratio of the media.

Second step is to double click it. This enters you into edit mode, and in the case of an image track event, edit mode is cropping.


Then you can drag the image off to one side or the other. You’ll notice the parts that are being cropped are transparent.

Step 3. If you click off the image, you’ll exit cropping mode. This does the crop, and displays the image how the project viewer is going to see it. You can always double click on the image again to re enter crop mode, and find you didn’t lose any of the image. It is just hidden.


If you look close at the above image though, you see the white to the right of the photo.

Step 4. You can remove that white by dragging the right viewport handle to crop out the white. Seen below, there is no longer a green border. I probably should of centered it, but ah well, you get the idea.


Step 5: Yay, now we can copy it and place them side by side! More foxes!


Step 6 because why not, let’s preview it.


There you have it, image cropping in popcorn maker!

Also made a popcorn tutorial out of popcorn showing this:

Thoughts? Comment below, let me know.


OSD 1.0

Posted in open source, Uncategorized on April 22, 2012 by scottdowne

This release is primarily a fix for my test on 677122. It has been pretty rough trying to get this test to be stable. It has tendencies to intermittently go into what looks like it’s streaming.

My newest patch, attempts to solve this by waiting for the current event to be finished, before firing the next test by calling SimpleTest.executeSoon(next); instead of just next(); This puts a new event on the stack, that fires the intended function. The next event on the stack will not fire until the current one returns. This way, we can be sure things are done in a sane, debuggable manner. Even this doesn’t fix the problem, which it didn’t, it is still imo good to do.

With the way my test is written, the frequency of this streaming mode is about one out of ten. After much trial and error I was able to reduce the test to failing every time, and filed that 747584.

The reason streaming mode is such a problem is this. I am testing that a video document triggers a time change on a media fragment hash change. I have covered this pretty extensively up to now, and my fix is solid. So to test it, I setup an iframe, a load event on the iframe, get the video resource on there, and listen for a seek, pause, end etc. when the video loads, it seeks to the media fragment time, right at load. But, if we’re streaming, at load, the duration is pretty much at the beginning, and streams only have a duration up to where they have played, so a seek beyond the current duration is not possible.

This only happens inside a mochitest, and only if the iframe src is remote. Something to do with the http server mochitests use, or so I thought. I to notice streaming also comes from js errors. Again, mochitests only. Also, because it would sometimes stream without a js error, and always with a js error. I thought maybe there was a connection, so I looked over my code, trying to clean it. While I did this, I got some advice to also move the iframe into the html, and attach the load function to the iframe’s onload event. I would never of thought of this… I am so used to writing JavaScript with addEventListener, I overlooked adding it to the iframe.

Adding an onload event to the iframe, living in the html, seems to be the trick to get this in the zone. I have running it through the try server, trying to get it to fail. At this point, I am pretty skeptic that it’s fixed. I have done 3+ try pushes, so far so good, but I don’t want to rush. This is such a flaky, intermittent fail I want to be sure.

I also had another fail in my patch’s test. This one only happened once, but I believe I also reduced it to a test case that can happen all the time. I filed it as well.

This bug has taken me through all sorts of interesting code. Starting from the docshell, to the video/mediaDocument, through the mediaResource and iframe loading, and finally ending in the mochitest and related http server. I feel quite comfortable in the video/mediaDocument code. The rest is so so. I am also over bugzilla anxiety. Filing bugs there is quite easy now, and I don’t care so much if I make a mistake and look foolish, as I know people don’t judge as much as people think. It is always worse in your own head. Everyone has been here, and everyone is just trying to help. It can be overwhelming at first, and just takes time to get comfortable with it. It’s not just a learning curve, but also an psychological hurdle.

My experiences in this class have been much different than in the previous OSD. Both classes I was jumping into something new, but I felt the pjs parser clicked with me instantly. My sort of thing, this I have found to be a real challenge. Sometimes I was wishing I took and easy bug, or decided to stick with more pjs bugs, but then I would of learned nearly as much. I might not be an expert, but I have definitely opened up the Firefox code. I have the ability to change it, test it, run it, and make a patch. This is a valuable skill for anyone, in any field. Browsers are so powerful and important now a days, that if you can say you can make it do something else, I don’t know anyone that wouldn’t have at least one idea of what to add or change to it. That’s power. The automobile of my generation.

Popcorn.js event effects framework landing in 0.7

Posted in open source, Uncategorized, video, webmademovies on June 23, 2011 by scottdowne

We’re just finishing up Popcorn.js 0.7.

One of the major things landing in this patch, is effects.

Effects are not just limited to effects, so we also decided to use the word compose. This allows our largest use case being effects to be obvious, but we also make it known that on a more abstract level, something exists. This way, the API itself is speaking the language of the user.

You create an effect plugin almost exactly like you create a regular plugin.

You can create a plugin like so:

Popcorn.plugin( "pluginname", {
  start: function( event, options ) {},
  end: function( event, options ){}

So create a plugin name, and define some functionality for start and end. Note, this is a very minimal example, as I was not intending to get too deep into creating a plugin.

Anyway, you can create an instance of your plugin like so:

  start: 1,
  end: 5

This means, between 1-5 seconds in the video, your defined start function will be called, and when it leaves the 1-5 time range, it’ll call your defined end function.

Effects work similar in creation, but to create an instance from an effect, you apply it to another plugin instance “composing functionality”.


Popcorn.compose( "effectname", {
  start: function( event, options ) {},
  end: function( event, options ){}
  start: 1,
  end: 5,
  compose: "effectname1 effectname2" // this way, we can apply as many effects as we wish

So now, that single plugin instance has the functionality of the start and end functions of the effect. Something to note is currently, the original plugin’s events fire first, then any composed events will be fired in the order they appear in the compose list.

Here is an example of it all in action.

Here, I create an effect for applying a css class name to the event’s target on start, and after 250 milliseconds later, it’ll go away. Using this, the potential for using CSS transitions is huge.

A more simplified demo.

Here, I do this:

    document.addEventListener( "DOMContentLoaded", function () {

      var p = Popcorn( "#video" )
        start: 5, // seconds
        end: 15, // seconds
        target: "footnotediv",
        text: "This video made exclusively for",
        effect: "applyclass",
        applyclass: "test1, test2"
        start: 20, // seconds
        end: 45, // seconds
        target: "footnotediv",
        text: "Visit for more details",
        effect: "applyclass",
        applyclass: "applyoverlay: .overlay, hover: parent"
    }, false);

What is happening here is the first footnote is simply having the two css classes applied to their target’s on start, and removed on end. Pretty simple.

The second footnote is not so simple. Here I am using CSS selectors split by semi-colon “classname: selector, classname: selector”. classname is the name of the class to apply, and selector is the target to apply it to RELATIVE to the target.

I want to stress that compose and effect are the same things, and that applyclass is only ONE example of how to use this. This is not limited to effects.

This is all pretty new stuff, and what I’ve just written is as far as I know the only documentation for effects. So anyone attempting to build an effect right now, is a trail blazer!

Butterapp new release candidate

Posted in open source, Uncategorized, video, webmademovies on June 15, 2011 by scottdowne

Butter app is about to release 0.3.

The above link is an older version. The release candidate can be found here.

The best of the new features are:

– Youtube support. You can now enter a youtube url as your video.
– draggable track creation. You drag a command from the bottom right menu onto the track to create a track.
– html and css bases track dragging. The old version used a canvas, and now we’re using jquery draggable and droppable.
– one preview of a track at a time.
– finally, you can now import univarsal subtitles as explained in my last post.

We also have a class of grade 6ers using and testing this software. I’m pretty excited about that, as I heard children are the best at finding bugs.

video presentation builder

Posted in open source, Uncategorized, video, webmademovies on November 9, 2010 by scottdowne

Few days ago I made a demo for building a presentation website using a video. It took a weekend to initially build, and a few more days of tweaking with feedback from David Humphrey to get it just right. It really is amazing how you can take something raw, add feedback, and end up with something polished. It was a good workflow for me.

Two things I want to talk about.
– What it builds
– How to build it

What it builds: It builds a presentation of websites based on a video. So you would have a video describing or explaining something, say a book report, and throughout the book report you mention key characters and events in the book.

Now, when these events and characters are mentioned, you can load a webpage of the character or event to display with the video.

How to build it: It is really quite simple and has three steps, all of which require no coding.
Step 1: Enter a video URL. This is a video you can make, describing whatever it is you are presenting, like a book report. Then put that video online, or somewhere where you can have a link to it. The key is you need a link to a video.

Step 2: Open the menu on the left by scrolling over it, and use this menu to encode your webpages and resources you want displayed in the presentation, and the times these resources should be displayed, and for how long.

Step 3: Using firefox, go to file, Save Page As… and save the webpage somewhere. Now when you open saved webpage in a browser, it should have the video playing in the bottom right corner, and the encoded resource URLs displaying along with the video, at the encoded times.

I am open to even more feedback to polish it even further.

FSOSS 2010 presentation

Posted in open source, Uncategorized, video, webmademovies on November 4, 2010 by scottdowne

I have been slow with keeping up with my blog lately, but I spent a good chunk of my time focused on my FSOSS 2010 presentation, then I had to write up two demos in a relatively short period of time which will be up here shortly, but they are being used in a talk today in Spain, so I will wait until that wraps up.

So anyway, my presentation link, which is where you can view a recording of my voice played along with the video of my slides. You can also view a live demo of my slides, which were created in HTML5 as well. My presentation was on open video and the video library popcorn.js, which recently moved from the processing.js lighthouse account and into the webmademovies lighthouse account.

Popcorn.js Website and JavaScript commands

Posted in open source, Uncategorized, video, webmademovies on October 18, 2010 by scottdowne

Hey, so Popcorn.js has two new commands.

website command, which will display a website in the targeted div, and a JavaScript command, which takes two parameters, a start function, which is to be fired on the events in time, and a stop, which is fired on the events out.

Example of the website command is:
<webpage in=”00:04:00:08″ out=”00:04:19:00″ target=”iframes” src=”” width=”100%” height=”100%”></webpage>

I just noticed it should probably be a: <webpage />

The script command is simple:
<script in=”1″ out=”10″ start=”customJS.start” stop=”customJS.stop”/>

    var customJS = (function() {
      var interval;
      var content = document.getElementById("content");
      function work() {
        var item = document.createElement("p");
        item.innerHTML = "working...";

      return {
        start: function() {
          var item = document.createElement("p");
          item.innerHTML = "starting...";
          interval = setInterval(work, 1000);
        stop: function() {
          var item = document.createElement("p");
          item.innerHTML = "done!";

Using the above as the function to call.