This year, SDL decided to host a hackathon that launched at SDL Innovate. And I, having a full time job, school, and a side project, needed something to keep me busy. So I decided to participate. I had some ideas for Media Manager, so I figured this was a good excuse to start experimenting with them.
Then I found out that there was money involved in the Hackathon. So I had an excuse to actually submit something.
A Hackathon is not necessarily about “hacking”
Many a geek, nerd, and neckbeard will argue about the true meaning of “hacking”. Let’s just call it “programming” or “coding”, for this case.
For this Hackathon, we can register as individuals or teams, with no more than three to a team. We had to create something that integrated with Tridion, Media Manager, Fred Hopper, LanguageCloud, or any of the other SDL products. The submission has to be either newly created, or updated for the event.
So, what can you hack with Media Manager?
Fun fact: Media Manager now has a JSON API.
Funner fact: This means you can get all the information about a video, without getting the video (directly).
Funnest Fact: You could build your own kind of player now, if you want to.
In the past, I’ve mentioned that I had created a jQuery plugin to work with Media Manager. It was a basic plugin that actually lived on top of the video player API that got loaded in (that API is created by the Projekktor library). While that jQuery plugin that I made was useful, it was a jQuery plugin that was dependent on a jQuery plugin that was dependent on jQuery and Media Manager.
With the JSON API, we’re able to skip the middle-man. So, that means that it’s entirely possible to create our own video player library. But it also means that it’s possible to create something much more mischievous, too.
mischief hacking with the JSON API
A quick nod, here, to the University of Phoenix. I’ve been working on earning a programming certificate for the last 8 months, and two of the required classes were for web development. Both of those classes introduced me to a particular HTML5 API called Canvas. I knew a lot of HTML5y things, but Canvas wasn’t one of them.
One of the things I learned, as a result of extra-curricular reading and exploration, was that it’s possible to inject videos into Canvas. Not only can you inject videos into canvas, you could actually create filters for videos, too.
Hacking Playing with CSS Paths
At the same time that I learned about the Hackathon, I read an article about CSS paths on Smashing Magazine. CSS paths enable you to actually create ‘shapes’ around elements. What the article showed was examples of how to create a clipping path around images, so that an image looks like it’s in a rhombus, or a polygon. What no one mentioned in the article is that you could do with with videos, too…
So, imagine a video being played through a tiny little vintage window. Or a giant triangle. Or a circle. That’s a thing that we could do, now. And that’s a thing I provided, as part of my submission.
The Big Idea
The Big Idea here is that, by skipping the Projekktor API, and going straight to the video with the JSON API, we can create a whole video effects library.
In future blog posts, I’ll go into detail on exactly how we can accomplish this.