This post is one of a series of blog posts from the first ONA class of MJ Bear Fellows describing their experiences, projects and sharing their knowledge with the ONA community. Fellow Lucas Timmons is a data journalist and web producer for The Edmonton Journal in Edmonton, Alberta, Canada.
The Progressive Conservatives (PCs) have ruled Alberta for the past four decades. First elected in 1971, the Tories have formed the government ever since. With no legitimate threat to their power, Alberta’s provincial politics and elections can be very boring.
When Premier Ed Stelmach announced he was stepping down, the race was on for a new leader of the PCs and the new Premier. Six contenders put their names forward.
As part of the coverage for the leadership race, the Edmonton Journal decided to find out where the six candidates stood on four issues. We were looking for a way that would:
- Let the candidates outline their positions
- Allow our readers to get just the information they wanted
- Add to our online coverage, and bring people to our website
- Be interactive
- Look cool
The idea we came up with was this video player. We had used it during the last Canadian federal election and it seemed like a perfect fit.
Videographer Ryan Jackson took care of the video work and editing. Very cleverly, he had the candidates look in all directions while recording them. He was then able to edit the videos so that it appears the candidates are looking and listening to one another when they talk.
Once the videos were made, I had to put the page together.
Below are some of the technical details. If you aren’t too interested in building this yourself, you can just skip to the conclusion. This isn’t a step-by-step guide, but more of a guide to things to look out for if you’re going to try and do this yourself.
The page works by using an API call to load a video by its id and start time in seconds. The API documentation is here.
For this to work, the user needs to have Flash Player 10.1 or higher installed. I used SWFObject to embed the player SWF and detect the Flash Player version.
To call the API methods to control the player, you first need to get a reference to the player. If you’re using SWFObject to embed the player, you can do that by using getElementByID().
Once that is done, you can use the loadVideoById function in the API.
You will need to create a function that passes the video id and the start time in seconds to the loadVideoById function. Once you’ve made that, you can point an <a> tag to run that function with onClick.
If you’ve put it together properly, the player should load a video and change the time to whatever time you’ve specified whenever you click on a link. Once that’s done, it’s just a matter of making the page look nice.
This video player added some much needed interactivity to our website. It gave users the ability to pick only the answers they were looking for and skip the rest. We believe this is more effective than a single video would be. People might not sit through a five-minute video, but they might spend more than five minutes going through a bunch of 30-second videos.
This presentation also let our readers know which question was going to be answered so they could make the decision to watch it or not. Finally, it also put the candidates’ positions, in their own words, next to each other.
The code was easy enough to create and can be modified very simply to be reused in the future.