It’s been a while since I last posted anything but given all of the recent changes going on around here it’s been a bit tough to find the time.
I have two ongoing personal projects and as of this past summer I am a full time web developer for the United States Holocaust Memorial Museum which has given me a chance to work on projects that I never would have been a part of. One of those projects launched this past Sunday in Vienna, Austria and I’m excited to tell you all about it!
I was provided with two example implementations of an online film player using a JavaScript tool called Popcorn that allows elements of a web page to be modified based on queues from the video player. Our Museum hired a great designer named Autumn who created the entire site layout in Photoshop and with her design and the example implementations from the Ephemeral Films team my task was to customize an Expression Engine site to display everything.
I don’t want to get too technical so don’t worry if you are a bit lost with all of the things I just listed, the goal here is to introduce you to the project not give the play by play of the entire back end. The URL of the site is //efilms.ushmm.org so you can follow along from here.
So my first step was to create plugins for the film player that would create the display for Expression Engine. The first of the plugins is on the homepage and it loads all of the images that link to the films. The images are pulled at random from the films that are ready for display. At the site launch this includes 25 films, more will be added after they have been annotated. (I’ll explain that part of the project in a bit)
If you choose the ‘Explore Films’ link in the navigation you will see the second plugin which loads all of the poster images for the available films and adds them to a Cover-Flow style display to allow you to choose from all of the available films.
When you choose a film you will be taken to another page with a custom plugin where the film is loaded with the appropriate frame rate and Popcorn is used to show annotations for the currently displayed frame of the film. Google maps appear for any known locations shown in the film and current images of the locations appear as the matching frames are shown. If you mouse over the images a larger version shows on top of the film so you can compare.
Other plugins that I created are the search results page which you can reach by using the Search box at the top of the page or the ‘Advanced Search’ which is itself another plugin. On the search results page you can see some basic information about the pieces of the film that match your search. So for instance if you search ‘Baker’ to find one of the Baker family in the films it will show you which film and the start and end times where one of the Bakers appears. Clicking on the image or title in the search results will play just that clip within the film. It’s pretty cool.
There are a few things that are not working as well as I want them to and there are some things still to be done but the most important thing to keep in mind as you play around on the site is that I put this entire thing together from a stock install of Expression Engine, PSDs of the design layout and two samples of how to build out the video player with very little portable code in just four weeks. I’d love to take credit for the site being in English and German but that was a simple javascript cookie setup and the content team at the museum who added both versions of the content to the Expression Engine content management system that I setup. They did an awesome job too.
I think overall we make an awesome team and I look forward to my future projects which I will share as they are released!