Planet WebMadeMovies

November 10, 2016

Brett Gaylor

Not Found

The URL you requested could not be found.

November 10, 2016 04:51 PM

August 26, 2016

Tristan Nitot

Video+html5+Popcorn.js=hyper-video

You may have seen that Brett Gaylor is joining Mozilla (see also Mark Surman's post). For those who don't know Brett, he's particularly famous for his "Open Source documentary" Rip! A remix Manifesto[1].

One may ask why Mozilla has hired a film director[2], but it actually makes a lot of sense thanks to Mozilla Drumbeat, as Brett is working on a Drumbeat project called Web made movies.

Now Brett has been a Mozilla community member for quite some time, contributing with the good folks at CDOT / Seneca College to create popcorn.js, "a JavaScript library for merging video with semantic data". I understand that this is a bit of a mouthful, but don't close your browser window just yet! Popcorn.js is what I would describe as "hyper-video" ("hyper" as in "hypertext"): the ability to leverage data from the video and link to it, Web style. Such data include:

Screenshot of the demo

Go and see for yourself the PopCorn.js demo (in case you're stuck with an older browser that is not capable of running the demo, here is a video of the demo).

I think this is a very significant step further for video on the Web, which was until now a very TV-like, passive and linear approach, now merged with the hypertext nature of the Web (its ability to link to things in other places), so that users can click on links in order to learn more. Of course, this is just a demo. Tons of things need to be done, but I see this as a very cool way to show what HTML5 and its video element, combined with the power of JavaScript and mash-ups.

Notes

[1] I can't say how strongly I recommend watching this movie, starting with its trailer.

[2] It's actually the second one, as Henrik Moltke, co-author of Good copy, bad copy, is already working at Mozilla... on Drumbeat!

August 26, 2016 03:48 PM

October 11, 2014

Brett Gaylor

From Mozilla to new making

Yesterday was my last day as an employee of the Mozilla Foundation. I’m leaving my position as VP, Webmaker to create an interactive web series about privacy and the economy of the web.

I’ve had the privilege of being a “crazy Mofo” for nearly five years. Starting in early 2010, I worked with David Humphrey and researchers at the Center for Development of Open Technology to create Popcorn.js. Having just completed “Rip!”, I was really interested in mashups - and Popcorn was a mashup of open web technology questions (how can we make video as elemental an element of the web as images or links?) and formal questions about documentary (what would a “web native” documentary look like? what can video do on the web that it can’t do on TV?). That mashup is one of the most exciting creative projects I’ve ever been involved with, and lead to a wonderful amount of unexpected innovation and opportunity. An award winning 3D documentary by a pioneer of web documentaries, the technological basis of a cohort of innovative(and fun) startups, and a kick ass video creation tool that was part of the DNA of Webmaker.org - which this year reached 200,000 users and facilitated the learning experience of over 127,200 learners face to face at our annual Maker Party.

Thinking about video and the web, and making things that aim to get the best of both mediums, is what brought me to Mozilla - and it’s what’s taking me to my next adventure.

I’m joining my friends at Upian in Paris (remotely, natch) to direct a multi-part web series around privacy, surveillance and the economy of the web. The project is called Do Not Track and it’s supported by the National Film Board of Canada, Arte, Bayerischer Rundfunk (BR), the Tribeca Film Institute and the Centre National du Cinéma. I’m thrilled by the creative challenge and humbled by the company I’ll be keeping - I’ve wanted to work with Upian since their seminal web documentary Gaza/Sderot and have been thrilled to watch from the sidelines as they’ve made Prison Valley, Alma, MIT’s Moments of Innovation project, and the impressive amount of work they do for clients in France and around the world. These are some crazy mofos, and they know how to ship.

Fake it Till You Make it

Mozilla gave me a wonderful gift: to innovate on the web, to dream big, without asking permission to do so. To in fact internalize innovation as a personal responsibility. To hammer into me every day the belief that for the web to remain a public resource, the creativity of everyone needs to be brought to the effort. That those of us in positions of privilege have a responsibility to wake up every day trying to improve the network. It’s a calling that tends to attract really bright people, and it can elicit strong feelings of impostor syndrome for a clueless filmmaker. The gift Mozilla gave me is to witness first hand that even the most brilliant people, or especially the most brilliant people, are making it up every single day. That’s why the web remains as much an inspiration to me today as when I first touched it as a teenager. Even though smart people criticize sillicon valley’s hypercapitalism, or while governments are breeding cynics and mistrust by using the network for surveillance, I still believe the web remains the best place to invent your future.

I’m very excited, and naturally a bit scared, to be making something new again. Prepare yourself - I’m going to make shit up. I’ll need your help.

Working With

source

“Where some people choose software projects in order to solve problems, I have taken to choosing projects that allow me to work with various people. I have given up the comfort of being an expert , and replaced it with a desire to be alongside my friends, or those with whom I would like to be friends, no matter where I find them. My history among this crowd begins with friendships, many of which continue to this day.

This way of working, where collegiality subsumes technology or tools, is central to my personal and professional work. Even looking back over the past two years, most of the work I’ve done is influenced by a deep desire to work with rather than on. ” - On Working With Instead of On

David Humphrey, who wrote that, is who I want to be when I grow up. I will miss daily interactions with him, and many others who know who they are, very much. “In the context of working with, technology once again becomes the craft I both teach and am taught, it is what we share with one another, the occasion for our time together, the introduction, but not the reason, for our friendship.”

Thank you, Mozilla, for a wonderful introduction. Till the next thing we make!

October 11, 2014 05:00 PM

March 14, 2012

Scott Downe

Getting started with contributing to Processing.js or Popcorn.js

So, the first two open source projects I was involved in have a fairly similar work flow, and I decided to write down the steps to get started in these projects.

Both Processing and Popcorn have fairly good intro sites, and I would start there. Popcorn also have secondary site that is useful. Also might want to check out the original Processing. Those sites provide a general introduction on the projects, and not something I will be covering here.

Both projects have four primary things, an issue tracker, a source repository, revision control, and a developer community.

An issue tracker is where bugs and new features get tracked, assigned, and reviewed. Both projects use something called lighthouse as their issue tracker. These can be found here for popcorn and here for processing. Issues can be anything from whitespace fixes, to documentation changes to complete rewrites. The pages I liked are the recent activity pages. You may want to look under milestones to get a list of potential tickets.

A source repository is a place where the code is stored and updated. Both projects use github as their source repository. These can be found here for popcorn and here for processing. Those are our release repos, in that they only get updated once for each release. If you want the unreleased code, you have to get that from a separate repo. These can be found here for popcorn and here for processing. We call these development branches.

Both projects use git for revision control. It goes hand in hand with github, but I do feel like it is a different thing. Source repository is where the code is kept, and revision control are the tools that interact with it. This is how I like to think of it, as it helps me understand it the way I need to work with it. I might not be technically correct with the definitions, though. Kinda like how the alphabet is not actually a song, but a song helps to understand it.

Both projects use irc for their developer community. This is the place you can go to get real time help from the people that have the answers. Popcorn uses the channel #popcorn and processing #processing.js. These can be found on the server irc.mozilla.org. More information about connecting to irc can be found here or here.

Now that that is out of the way, you will want to create a github account if you don’t already have one, then fork one of the projects from their github page. You will probably want to fork one of the development repos.

From there, you will need to get that github repo onto your local machine. I used this post when I started this, and I recommend it to others.

Next step is to find a bug on one of the lighthouse pages. Maybe comment in the bug that you are interested in working on it, so others know not to work on it as well.

You will want to create a branch on your local git repo named after your bug number. So, if my bug is popcorn bug #927 I will want to create a branch called t927. We add the t because code commits can be shorthanded to numbers, and there may be collisions in branch names and commits. Always good practice to but a letter in it. You can do this by running this command:

git branch t927 develop
git checkout t927

What this does is created a branch named t927 that is based off the branch develop. Then, moves you over to that branch.

Next you can go about changing the code in your local git repo. Once done, you will want to run some git commands.

1. git status: this shows the files that have changed, that you may need to commit.

2. git add: this adds those files. If you notice running git status after a git add, things will of changed.

3. git commit: this commits those added files. Again, running git status after this, you should see even more changes. I like to run this command like this:

git commit -m “[#927] usefull message about what I did”

This will add a message to the commit, so future developers can see why certain lines were changed, and even track it back to the original lighthouse ticket.

4. git push: this pushes the changes into your forked github repo. An example of this command for when I do it is:

git push git@github.com:ScottDowne/popcorn-js.git t927

This command takes the ssh url of my repo, and a name to name for the branch. After doing this, I could find my branch here: https://github.com/ScottDowne/popcorn-js/tree/t927 and my changes here: https://github.com/ScottDowne/popcorn-js/commits/t927

From here you will want to take one of those two urls and drop it back intp the lighthouse ticket, as a comment, and change the status to peer-review-requested. Both projects have a two step review process. Peer-review and super-review. Once both reviews passed, the repo manager will pull your changes into develop, and then on release day, everything including your changes will be pulled into master.


March 14, 2012 05:44 PM

March 10, 2012

Scott Downe

Popcorn.js 1.2 new features

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.


March 10, 2012 07:29 PM

February 13, 2012

Brett Gaylor

Popcorn and Documentary

In this post I explore how Popcorn follows the tradition of technology influencing the form of documentary. This post was created with Popcorn Maker.

February 13, 2012 09:53 PM

February 10, 2012

Scott Downe

Popcorn.js down the dark path of IE8 support

What I mean by support is that it will be possible, but it will be a “Your mileage may vary” situation. We’ll make it possible, and show how to do it, but we won’t officially support it or test against it. It will be a separate entity that the Popcorn code does not care about.

This is due to increasing demand for Popcorn.js to reach more audiences, and while I do believe this is a dark road, and one that detrimental to the fight to kill IE8, I also find it a unique challenge…

Personally, I believe the numbers in IE8’s market share to be inflated, and not really accurate. It is the enterprise environment that refuses to upgrade to the next version, and not the home user. I would say for each home computer, there is one or more users. And, for each enterprise install, there are three more sitting in the office next to it that are only used once a week. I know this, because we have a bunch of dead offices in our building, probably with Windows XP and IE8. So now this person can view Popcorn on Fox’s website one day a week, instead of doing work…

Anyway, we found a way to have our cake and eat it to.

First, we’re pulling players out of core, and into a module. We are doing this as players are mainly for youtube support, which is flash, which works on IE8. So by pulling it out, we can make the player module 100% support IE8. Then, we are going to create a shim, that when included before a clean popcorn.js file, will make it dirty. So now you include your shim, popcorn, and attach the player module, and you’re good to go. I also considered simply including the shim inside the player module, as without the player module, the shim is pretty pointless, but I am not sold on this yet; need more discussion.

Another note. This will not mean each and every one of our plugins will support IE8. Some might, some might not. But, plugins can be modified and created with IE8 in mind, and that is the idea of a plugin anyway.


February 10, 2012 01:23 AM

February 08, 2012

Brett Gaylor

Mozilla Popcorn aka The Meme Generating Machine

meme ( /ˈmiːm/) “an idea, behavior or style that spreads from person to person within a culture.”

“A meme is an idea that behaves like a virus–that moves through a population, taking hold in each person it infects.” - Malcolm Gladwell"

We need Mozilla Popcorn to become a virus.

Hear us out here.

In our early iterations of Popcorn Maker, we’ve been tackling the problem of how to make it easy for non-programmers to create Popcorn experiences. It remains the central focus of the project, and we’ve fleshed out our User Stories to imagine the full experience that a user might have. Ben has described these stories in a recent blog post.

During our Popcorn Maker sprint, we put a lot of thought into imagining how our users’ creations will get shared and disseminated on the web. Ben has blogged about how Popcorn.js is a gateway drug to learning JavaScript (Also of the good sort. Stay with us). Similarly, we want Popcorn Maker to be a tool for injecting the Maker meme onto the web.

Fork my meme

To do this, we’ll need to do a few things. First, we need to make it easy for Popcorn makers to embed their creations on their own blogs, Tumblrs and websites. This means offering <iframe>embeds.

More interestingly, we want to give viewers the ability to fork others’ Popcorn productions. If you’ve watched Jonathan MacIntosh’s Buffy Vs Edward pop-up video remix, for example, wouldn’t you love the ability to easily clone his creation and add to it?

Each Popcorn creation needs a post-roll that offers viewers the ability to 1) Replay, 2) Share and embed, and 3) Fork this creation.

Popcorn Gallery

To build WordPress-like community scaffolding, we need the ability for every single creation to be made available in the Popcorn Gallery. When users choose to [Share] from Popcorn Maker they have an option to share to the Gallery that is checked by default. While the Gallery will favour our default templates, it will become a jumping off point for new creators to get started with Popcorn. It will solidify the notion that creating on the web is generative. The act of creation will start by building on someone else’s work.

We think Popcorn will be a good bug to catch. Like getting the chicken pox when you were a kid. Or maybe more like taking an interest in photography. We’re sure this is the right metaphor. Note: knock knock jokes, box stores and lolcats were all considered as alternatives while titling this post. Go meme or go home.

February 08, 2012 05:28 AM

January 14, 2012

Scott Downe

Popcorn.js xray goggles plugin.

On and off this week I have been fruitfully fumbling my way around the Hackasaurus xray goggles bookmarklet, in an attempt to use them in a popcorn plugin, while other things brew.

A tl;dr demo.

The idea is to execute the goggles between a time range, on an element defined by popcorn’s data. In the case of the above demo, I used the video element for testing purposes.

Right now, it is in a demoing state, demoing the use of the goggles at a time range. It is not really in a practical usable state, as you cannot close the goggles, nor can you control the video as they are up; quite frustrating.

I am going to allow popcorn’s data decide what to do with the timing. It can either leave the video playing, pause the video for a set number of seconds, or simply leave the video paused until the user closes and hits play again.

I also need to re add some animation that I avoided for sake of getting it working. Doing this will be good practice for me, because I’ve never been much of a front end guy, but I have the artistic abilities that I just need to dust off.

The hardest part of this was using HTML5’s postMessage. I have never used it before, and was stuck for longer than I would of liked, but long enough to build character. I was attempting to send a postMessage to an iframe before the iframe was done loading, thus the iframe’s event listener was not yet defined, thus my postMessage fell on deaf ears.


January 14, 2012 05:44 AM

January 12, 2012

Scott Downe

Firefox media fragement tickets

So, to follow through with my last post, I have done some more research and have three potential bugs.

First, It turns out media fragment is already done, which is exciting because now we can use it in Popcorn.

Second, three bugs were blocked by it, which can now be done: [498253 677121 677122].

Reading bug 498253, and it seems as of second quarter of last year, there were still on going spec changes.

677121 still interests me.

And, 677122 seems straight forward enough. A bug where it seems it is caching the media fragment start time, and a refresh is required to update the time. The steps to reproduce right from the bug:

1) Open http://www.bluishcoder.co.nz/mediafrag/AudioAPI.webm#t=50,100
2) Change the fragment portion to be “#t=30.100” and press enter

Expected Results:

1) Start and End fragment of the video would be the new position of 30 and 100 respectively.

Actual Results:

1) The video does not change the start/end fragments. They stay at 50 and 100.

This one is still a good candidate.


January 12, 2012 07:47 PM

OSD700 and back to school

Today I had my first day back to school, and first day back in Dave’s open source class.

I’m currently working at CDOT with Dave still, which means I will still be working on Popcorn and Popcorn-Maker. But, for his class, I will need to do more work for him, but it cannot be CDOT work. It makes sense to me that I find Firefox bugs involving video spec, that way I can leverage these new tools into popcorn and popcorn-maker use.

So let’s look at bugzilla.

I made a general search under “media”. I wasn’t expecting anything to jump out, just wanted to see what I was dealing with. But, something did jump out at me.

Now, this ticket might not be the starting point for my work, but it is definitely something I am interested in.

The general interest is media fragments. Which the above bug relates to, but does not mean I am not doing the above bug. More research is required.

I also have interest in general media spec bugs, and I’ll look for more to have some concrete bugs tomorrow night.


January 12, 2012 06:00 PM

November 13, 2011

Scott Downe

Popcorn.js has a new brother… Popcorn-Hacker

Anyone familiar with Popcorn.js, Popcorn-Maker, and bookmarklets checkout my demo.

A bookmarklet is JavaScript that runs via the address bar. So, you can fill a link element in a webpage to instead run code. Click the link, runs the code. You can also drag said link into your bookmarks for later, and continual use.

What I’ve done is created a bookmarklet that lets you view and edit any popcorn.js page real time.

There are a few caveats. 1. It cannot be done on any version of Popcorn before 0.4, because I need access to Popcorn.instances, but that doesn’t matter because it also needs p.media, which was introduced in 0.5. I also ended up using Popcorn.getScript, which is another dependency, but getScript is introduced before 0.5, so if we have instances and media, we’ll have getScript. 2. We need plugins with complete manifests. Manifests are like meta-data for plugins. It tells me what to expect, thus what I can enter into the form fields. Without a manifest, it is read only Popcorn. 3. Demos made from exec alone will not work. Exec isn’t really editable without writing JavaScript anyway.

Now that the academic parts of the post are out of the way, I shall ramble about my thoughts on the project. This thing, to me, is a good example of a hack. I took parts of code from one thing, and remixed them together to do something different. I had little regard for how it looked, just that it worked. So, I guess it is more of a proof of concept. I really want to take it to the next level, though. Give it an export of some sort, and more closely tie it in to Popcorn-Maker’s build tools. Other-wise, this is essentially a fork of Popcorn-Maker. Over time, it will be too different, and become a separate entity that needs to be maintained separately. In order to avoid this, we would have to do some changes to Popcorn-Maker. It has some flaws, things I had to hack around. One of the good things was Popcorn-Makers event system. Made it easy to tie in my new functionality without having to worry about what was happening in other parts. Something interesting I noticed doing this, Popcron-Maker is close to 40k lines of code. This includes HTML, CSS and remote scripts like JQuery. Still though, that’s a lot of lines.

A few good pages to try it on are: Popcorn homepage, The demo from this fantastic tutorial on Popcorn itself, and the initial semantic video demo from way back in 0.1 of popcorn. It’ll work on others, but there is code in the wild it will not work on, yet. I’m going to deploy the “fix it for one demo at a time” technique I learned doing work in Processing.js. It’s great to have user generated content to test off of!

Now for an abrupt end to this post.


November 13, 2011 03:47 AM

November 06, 2011

Scott Downe

Popcorn.js 1.0, mozfest, Popcorn.js Universal Subtitles parser

This weekend has been a blast.

Yesterday Toronto time we released Popcorn.js 1.0 in London time.. or yesterday, I’m not sure, but anyway, it was super cool. We released with new docs made by David Seifried, a Mozilla based website for what Mozilla is doing with Popcorn, and a shiny new build tool, built by Chris De Cairos.

I’ve been spending the weekend in London at the Mozilla Festival. Been getting way more Popcorn attention than I expected or imagined! Been interesting hearing impressions and educating people on Popcorn.

I also spent some time at the festival hacking up a Popcorn.js Universal Subtitles parser, and demo. I have one work in here before. Back in 0.1 I did a internal parser for Universal Subtitles, and for a beta version of Popcorn-Maker, I implemented a parser for Universal Subtitles as well. This one though, should be the final, as it’s not longer living inside something, but lives on it’s own in modular space. I also decided to take some time to make it look nice with Brian Chirls’ pop plugin! Check it out!


November 06, 2011 01:50 AM

October 21, 2011

Scott Downe

Thoughts on Popcorn.js hackathon in San Francisco

Last week I brought my JavaScript knowledge and experience to an event that put JavaScript developers and filmmakers in the same room for two days. The idea was to produce something. There were six JavaScript developers, and six films with 2-4 filmmakers per film. There were also designers patrolling the grounds, helping out. I cannot stress enough how important they were. Design really does help bring out the essence of a project, like spice in food. Flavour enhancers. Doesn’t matter how good, right, or fast a program is, if it looks bad, it will, by definition, still look bad. Not only was each group was able to produce something cool, but each produced something unique.

Wired has an article about the event, so check it out.

The actual event went down like this. Breakfast and mingling for about an hour, while everyone arrives. Then we all had a meet and greet. By 10:00 (if my memory serves me) we broke off into groups. So there I was with a group of people I never met, a film I have never seen, and a clock ticking. By lunch we had specced out what we were going to do. This is always an interesting process. You have a developer that knows nothing about the project or how things should be done, and you have designers and filmmakers that don’t know what can and cannot be done or how to measure how long something will take to develop. The problem for developers is “the easiest thing isn’t always the coolest” and for filmmakers and designers “the time it takes to develop something has nothing to do with how cool it is”. The developers don’t know what should be solved, and the fimmakers don’t know what can be solved. I think the solution is for the filmmaker and designer is to start with a big vision, then to have a back and forth discussion. It really is about communication and an open mind. Developers don’t be scared if filmmakers want it all. Filmmakers, don’t be scared to want it all. Developers don’t be scared to say no. Filmmakers don’t be scared to be told no :P. Eventually you will come to something that is “quick to cool”. Then it is lunch time.

After lunch you have to start developing. At this point huge changes to the spec can be frustrating, but still, no harm in asking. You never know, that thing you want changed might actually be easier! so keep up the communication. The rest of the day I struggled with getting Facebook’s API to work, but I did. It was an unstyled, nonsensical, boring piece of what I do best :D.

The next day we got to putting in the design and data. These are two things you need to figure out in the first half of the first day, and if possible have the data ready before the end of the first day. I kept the design pretty clean, empty, but clean, so it was quite easy to plug in some css and add some images. This is where you need the designer again. So, designer during spec phase, not after, and designer during pull it all together phase, not before. Then it’s just a matter of testing and debugging, and it’s still ok to request changes, just understand it might not happen.

Communication was key. Filmmakers teaching developers, and developers teaching filmmakers. I feel like designers have already crossed this bridge.


October 21, 2011 12:35 AM

August 24, 2011

Scott Downe

Popcorn.js player plugin revisit

I’m about to revisit Popcorn.js players. Right now we have 4 players, youtube, vimeo, soundcloud and baseplayer. All hacked up in their own way, and a maintenance nightmare. I intend to make basplayer something the other players derive from. This will reduce code surface, thus reducing bugs, keep things from getting fragmented and out of sync, and most importantly, test functionality once, reducing our testing phase and bugs in our test suites.

I’m thinking we break the current API regarding players with this patch, I think it’ll be worth it.

I think baseplayer will exist internally (it won’t be callable), and when you call:

Popcorn.player( "youtube" {});

it will create an instance of baseplayer, you can then pass in the additional features. So, if someone wants to use baseplayer without any additions, they can simply do this:

Popcorn.player( "baseplayer", {});

That will create a player emulating an HTML5 video players API that can then work in Popcorn, like this:

var p = Popcorn.baseplayer();

It will not actually display anything, but things like play, pause, currentTime will work and fire events.

To create a player, the idea is to add the needed functionality to make it work, and the Popcorn.player initialization code will look something like this:

Popcorn.player( "youtube", {
  setup: ( options ) {}, // creates the element and handles its ready state
  play: function( options ) {}, // simply start the setup element's play 
  pause: function( options ) {},
  currentTime: functipon( options ) {}, 
});

I am hoping in most cases, this is all we will need. So the internals of firing events can be handled in internal baseplayer code, because we can be smart enough to tell the overloaded play and currentTime to fire popcorn’s timeupdate.

This is all to setup a player plugin. From here, a user can then use it by doing this:

var p = Popcorn.youtube( "targetDiv", url );

The actual breakage of the API is minimal. The old way is below, the new above:

var p = Popcorn( Popcorn.youtube( "targetDiv", url ));

Positioning related code of the element will be setup as well. Not sure yet how that’ll look, but I do know the internal baseplayer won’t have a position, but it will have functions to manipulate the position, and probably have the position code look inside the element created by the setup function for the position related code.

I suspect there will be other issues while I work on this, but I’ll cross those bridges as I get to them, so I need to stay flexible to reduce the rage.


August 24, 2011 05:56 PM

April 02, 2011

Brett Gaylor

Video: What is Mozilla?

I’ve been working on and off for many months on a video to explain Mozilla to the uninitiated. The home for the video is now on the Get Involved page of the mozilla.org site, and I’m excited that it will be part of a process for getting people excited about pitching in at Mozilla. You can watch it below: mega hats off to Rainer Cvillink, Mozilla’s in-house video wizard, for all the great camera work, and to Jenn Strom for editing and motion grapnics.

April 02, 2011 10:29 PM

March 30, 2011

Brett Gaylor

Videoblog: Buttercamp

Everyone is still recovering a bit from Buttercamp. Anna Sobiepanek beat us all to it with a great recap of the event, but let me say how thankful I am for the extraordinary effort the participants put into the day. We learned a lot about how to do events like these, and definitely left wanting to do more.

As Anna mentioned in her blog, our biggest lessons were a) the need for designers to be present, and b) that we should probably do these over two days. Scott Downe benefited from teaming with Zach Liberman, and mentioned that 2 developers are crucial for a team, so that if one struggles with a blocker, the other can forge ahead. Well noted.

Demos:

Note: these demos will all require a modern browser, may not work for you at all, and are the product of one day’s work.
GML + Popcorn:

http://scotland.proximity.on.ca/sdowne/popcornGML/gml+popcorn/
Integrating the Graffiti Markup Language (GML) XML standard with timed popcorn events.

Robots:
An experiment with “node” style decision forking using popcorn
http://robothaus.org/robots/

#18daysinEgypt:
To have popcorn events appear in specific locations on a full screen video, Brian Chirls wrote a popup video plugin. Video events that appear cause the main video to lower volume and loop.
http://code.chirls.com/buttercamp/

Digital Diaspora Road Show:
Accompanying the feature documentary Through A Lens Darkly, filmmaker Thomas Allen Harris creates “Roadshows” were participants explore how photography connects them to their heritage. This demo made extensive use of the Butter application, and to facilitate multiple editors, Boaz Sender added import/export functionality to the edge version of Butter.
http://dev.webmademovies.org/lensdarkly/
note: this demo does not work in Firefox due to mp4 only source.

Kapor Center Mural Unveiling
Trevor Parham used Butter initially for data entry, but then decided to focus on CSS and layout to create this compelling use case for popcorn: an annotated version of a recent event at the Kapor Center.
http://kaporcenter.org/files/video/

TubeyLoops
A modified version of PatternSketch, which controls videos via popcorn to create a video remix machine.
http://www.tubeyloops.com/tubeyloops/
note: use keyboard keys Q W E R to control video.

In addition to these demos, other plugins, connections, and starts of new projects were forged. Thanks to ITP, the Center for Development of Open Technology, Bocoup and Eyebeam for helping facilitate this meeting of great minds.

Buttercamp was:

Michael McCarthy Henrik Moltke Yasmin Elayat Kirby Ferguson Peter Asaro Peter Kaufman Ann Bennet Thomas Allen Harris Woo Cho Anna Sobiepanek Baowen Huang Ben Moskowitz Boaz Sender Bobby Richter Brett Gaylor Brian Chirls Elad Schanin Fred Truman Greg Dorsainville Ingrid Kopp Jeff Howard Jeremy Diamond Jonathan McIntosh Matt Thompson Rick Waldron Scott Downe Todd Carter Trevor Parham Yujin Yi Zachary Leiberman

March 30, 2011 10:49 PM

March 24, 2011

Brett Gaylor

Welcome Bobby Richter

I’m very happy to announce that Bobby Richter is joining the Web Made Movies team as Creative Technical Lead. Already a Mozilla contributor, having worked with the #audio team on a variety of demos and libraries, Bobby is joining us to, as he writes on his about page, “make Web Made Movie’s ideas tangible as quick as possible”. Bobby’s job will be diverse: contributing to the popcorn.js community, advancing the Butter platform, and helping to create magnetic productions as outlined in our 2011 goals.

Bobby brings a range of experience – from helping to create the NFB’s award winning Out My Window, to a stint at Electronic Arts, Bobby has both skill and experience that all of us on the media team are thrilled to have among our nascent group.

During our recruiting conversations, I was particularly excited about his experience with WebGL, and these discussions manifested themselves in a demo. Please check it out here – its an early peek at integration WebGL and Popcorn, via an homage to Mozilla’s JavaScript jedi master Brendan Eich.

Say hello to Bobby over at his blog, and you can find him on irc.mozilla.org in the #popcorn channel as “richter”, or sometimes under has super hero name, secretrobotron. Welcome, Bobby!

March 24, 2011 07:14 PM

March 01, 2011

Brett Gaylor

Butter screencast

As a part of our webmademovies.org relaunch, I thought I’d create a screencast of Butter, the authoring environment for popcorn.js. What do you think?

March 01, 2011 09:28 PM

February 26, 2011

Brett Gaylor

Web Made Movies at BAVC

Two things I learned this week:

1) Exercise caution when giving 12 high school students access to an etherpad that is projected against a wall

2) The Bay Area Coalition (BAVC)’s Factory program for youth is srs bizness

Mozilla has partnered up with the Bay Area Video Coalition and Zero Divide to implement the technologies coming out of Web Made Movies into the current curriculum of The Factory, a video collective for motivated youth in the Bay.

Ben Moskowitz and I came to meet members of the collective, and were joined by our Mozilla colleagues Atul Varna and Lukas Blakk. Lukas had recently been working with teenage girls at the Dare 2 B Digital Conference, addressing the gender gap in computer science, and Atul has been working on the Hackasaurus project with Drumbeat, a set of tools to encourage kids to hack the web. The 2 days at BAVC were for us a way to test some of our thinking about “web literacy”, to test the Butter authoring tool, and to meet the youth at BAVC. We were hoping that they’d understand what we were banging on about after the two days and would be inspired to bring a hacker ethic to their projects.

Our first excercise was to wake the HACKASAURUS. Everyone checked out the X-Ray Goggles, a fantastic tool that lets you see how a web page is put together, and modify elements of it. Paired with HTMLpad.org, which renders HTML typed into an Etherpad of the same name (try it - its awesome), the Hackasaurus tools teach the user that the web really is made up of many simple parts. To help visualize things, students printed out their favourite websites, cut them up, pasted them back together, and re-created their cutups in HTML. Its a great basis on which to start playing with popcorn.js - it puts one in the mindspace to consider “how can I hack this video?”. IMG_9852.jpg IMG_9861.jpg

Fortunately, our friends at Bocoup had pushed some last minute changes to Butter, the authoring tool for popcorn, and it was ready enough to be tested by the group. We loaded up one of their productions from last year, “The List”, which was a dramatization of the military recruitment that happens when students take standardized tests. There was a lot of factual information in the video, so it was a perfect test bed for popcorn.

IMG_9870.jpg
IMG_9875.jpg

The students formed groups and each took a section of The List and pulled it into Butter. They added semantic data, some hacked with Ben a method for displaying images on top of the frame, others linked to an HTML page that let users opt-out of recruitment, others brought in photos from flickr, articles from Wikipedia and maps of their school on Google Maps. Lukas wrote a quick script that would chain the videos together, and then we had a screening at the last minute!

IMG_9889.jpg
IMG_9886.jpg

You can watch the completed movies here - keep in mind these were created in two hours by a group that had never written any HTML, so we were well impressed.

One of the great things that came out of the workshop was a huge list of bugs for popcorn and butter created by the students that we can now bring back to the development community. We’re looking forward to coming back in April and working with The Factory through till the fall! IMG_9879.jpg IMG_9904.jpg

February 26, 2011 05:41 PM

February 17, 2011

Brett Gaylor

Web Made Movies 2011

Along with my other colleagues at Mozilla, I’ve been doing a lot of work lately thinking about what the rest of 2011 holds. It’s been great to read posts by Ben Moskowitz, Phillip Smith and Nathaniel James as they describe and forecast their work on the Knight/Mozilla Technology Partnership. It’s painting a great picture of Mozilla’s commitment to transforming media and journalism - I thought I’d share my plans as well in the video above.

February 17, 2011 06:49 PM

January 31, 2011

Brett Gaylor

Yes we did!

This past week, I was fortunate to be part of a great collaboration between Mozilla and the PBS Newshour team, creating an annotated version of Barack Obama’s State of The Union Speech using popcorn.js. While the demo itself is fairly humble, its actually quite an accomplishment given that we had only met the Newsroom staff the day of the speech during a meeting at the Corporation For Public Broadcasting. I think the Newshour team experienced the power of the open web first hand - a talented group of developers were able to collaborate quickly and produce something of high quality (not unlike a tv newsroom). So much so that we’ve begun a conversation on PBS to use popcorn.js in all of their future analysis.

The whole experience was a great example of the kind of innovation that we’re trying to foster with Web Made Movies: video producers come up with new use cases for technology , and the resulting code is put in a repository for future use. It’s proof that HTML5 video is a great space to be exploring.

David Humphrey and PBS Newshour recently blogged about their experiences. I thought I’d provide a blow by blow.

January 25th, 2011
Washington, DC: Ben Moskowitz, Nicholas Reville, Geoffrey MacDougall and myself are pacing around a presentation room at the Corporation for Public Broadcasting. We’ve come to express why we think there is natural alignment between public media and the open web.

10:00
A little bleary from travel, a previous day of meetings, and bad breakfast joint coffee, we meet a room full of people involved in American public media - PBS affiliate stations, the PBS Newshour team, National Public Radio, and others.

We had created some demos over the previous 2 weeks - including this popcorn treatment of a PBS Newshour piece on Hait (only the first several minutes are annotated). We also experimented with the WGBH Open Vault, creating a parser for their metadata schema that would translate into popcorn data (due to mp4 video, works only in webkit browsers. Ben and his cousin created this example video report, based on lesson plans in the PBS Newshour piece on Haiti. Nicholas at PCF also showed the results of a translation party that Universal Subtitles had hosted with PBS Newshour.

We felt the presentation went well - the room was definitely thinking about the possibilities present in popcorn, and immediately grasped the advantage of adopting Universal Subtitles.

11:30
After the speech, PBS Newshour correspondent Hari Sreenivasan remarked how they wished they had it for the State of The Union address. “Isn’t that tonight? Someone asked” Hari nods. A wireframe is sketched out.

3:00
We’re with Travis Daub, the Newshour’s digital producer. He’s on the phone getting the run down on when the video of the president’s speech will be on Youtube. He says midnight, and analysis will come in throughout the evening These news people stay up all night, too!

We hop on the popcorn irc channel (link). I ask David Humphrey at CDOT if he is up for bringing popcorn.js to the State of The Union. He laughs, of course he is. He asks if Anna Sobiepanek and Scott Downe who are co-op students at Seneca if they are in - you bet. Rick Waldron, a javascript ninja at Bocoup picks up on what is happening and starts writing code immediately based on the spec. Ben Moskowitz and I rush to keep up, posting wireframes, and communicating with Dean Jensen at PCF / Universal Subtitles who is co-ordinating the transcript that will be instumental in timing the analysis. Travis logs into IRC from his iphone in a cab.

7:00
Robert Bole for the Corporation for Public Broadcasting orders some Chinese food.

9:00
75% of the code necessary to convert PBS’ annotation system to popcorn. The wireframes are posted. Its gonna pull in twitter, have chapter selectors, wash your car, and email Obama. This is going to be easy. Lets watch the speech.

10:30
Travis starts uploading the video.

11:00
Snag. The encoded video doesn’t have audio. Travis will have to start again, and do it twice for browser compatability. Ouch. The video is so long that the encoding process is painful.

11:15
New snag. Servers seem to be failing.

1:00
Multiple snags. Grumpiness sets in. Travis valiantly posting new versions. Popcorn hackers have the analysis working with a dummy video - just waiting for the pieces to come together.

3:00
The pieces are not coming together. The night is called.

The next day
A snow storm, a train travel, multiple taxis and subways, a hamburger at a breakfast spot - next thing you know its midnight again. Is it working yet? No, it is not. Inconsistencies in the transcript. Hotel Wifi killing us. Must sleep.

With a final push, and additional work in the morning, the bugs are ironed out. Vanessa Dennis at PBS Newshour adds styling and pushes to their blog on the front page. My favourite quote from theirblog:

“The Web is changing, and we at the PBS Newshour are changing with it through experiments like these.”

Experiments like these can be exhausting, but the thing I love about working with Mozilla is that we make change by building things. It feels great that Web Made Movies is really starting to accomplish this.

January 31, 2011 06:02 AM