What does the future hold for music videos? That’s the question we sought to answer as we worked with pop sensation Jasmine Villegas on a new version of her hit song, Just a Friend, now available exclusively at JustAFriend.ie.
Music videos have remained largely unchanged over the past few decades. Yet this is an area ripe for evolution. Modern browsers like Internet Explorer 9 with hardware acceleration coupled with the proliferation of social media means artists have new and exciting ways to connect with their fans through the web. It is an entirely new realm of possibilities, complete with personalized and interactive experiences tailored to each and every person.
Today, we get to take a cool step forward in that evolution, as we unveil a new music experience that pushes the boundaries on what’s been done with videos, both in terms of the interactivity and personalization it enables and the way it was developed: pure HTML5 goodness.
The project, Just a Friend.ie, takes the hit song from pop star Jasmine Villegas and brings fans straight into the center of her music video, with cool features like Facebook integration, the ability to influence the story, play games, and even get or give a surprise “phone call” from Jasmine.
The heavy focus on fan engagement has always been important for Jasmine since she built her fan base from the ground up using social media and a powerhouse work ethic – in fact, she is currently one of the most powerful woman on Twitter, according to her Klout score. While the rest of this particular post focuses on the development of the site itself, if you want to read more about the collaboration with Jasmine, click over to the Microsoft News Center.
JustAFriend.ie: Behind the Scenes
Creating great experiences with HTML5 has been a big focus for the IE team since we introduced IE9 and in the past few months alone you’ve seen us launch the HTML5 version of Cut the Rope as well as the Inaugural Capitol Tour for the hit movie the Hunger Games. With each new experience, we like to give a peek under the development hood so that others can see and learn from how the experience came to life.
Of course, if you want just a quick taste before you dive into the full dev page, here are five of the coolest tech call-outs from the video:
1. Seamless Facebook integration. When you sign-in to your Facebook account on JustAFriend.ie, you may notice your pictures appearing on Jasmine’s wall. If you look closely, you’ll notice they have been placed in such a way using the CSS Visual Effects to make it appear as if they belonged there to begin with.
2. HTML5 canvas elements overlaid on live action video. In the bowling scene, for example, we track the lane and add a 3D game layer over top. The result is an augmented reality feel.
3. Database Storytelling: Rather than having a linear video play from beginning to end, during filming we had to shoot multiple versions of the same scene based on the result of a user action. In doing so, we had to basically create a database from which to seamlessly call particular scenes to ‘play next’. When done right, it feels as if the result was always the intention. When in fact, you can go back and play the particular scene differently and notice a different result.
David Mikula, Senior Creative with Digital Kitchen said, “We’ve been impressed by Internet Explorer’s performance, especially when it comes to 2D canvas and SVG. Microsoft is looking to the future by supporting modern web technologies and the communities that bring it to life.”
5. Jasmine’s Call. At the end of the music video, you have the opportunity to dial a phone number into a Windows Phone, and Jasmine herself will give you, or a friend, a call.
This is just the beginning in terms of the creation of this experience, so I’d encourage you to take another look at the video and then dive into the teardown to see how the Digital Kitchen team made it happen. Enjoy!
Ryan Gavin, General Manager, Internet Explorer
Updated November 8, 2014 2:20 am