April 2, 2012 11:14 am

Internet Explorer and Music Star Jasmine Villegas Make Music Fans Part of the Video on Remix of “Just A Friend”

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.

For JustAFriend.ie, we partnered with Digital Kitchen on the development, focusing on how to add new and exciting levels of interactivity. If you’re a developer, I encourage you to take a look at the full page JustAFriend.ie: Developer Behind the Scenes since it includes a behind the scenes video, a technical teardown going into depth around the technologies that built the experience, and a download of the asset studio JavaScript used to handle the pre-caching of audio, video and images through a configurable queued system.


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.”

4. Mad JavaScript Calculations. Many of the game mechanics, particularly the scene where viewers can “push” Jasmine’s cheating boyfriend into a pool, required a lot of up-front planning in order to achieve the result we see today. To give you a taste for what went into creating this: since we filmed the scene at 96 frames per second (slow-mo), the length of time that it would take for this section to play out at 96 frames would have been far longer than the allotted time we had in the song for the game mechanic to play through. So what we ended up doing was writing a JavaScript calculation that took into account the number of times you hit the spacebar in a given amount of time and calculated that back so when a certain threshold was hit, we seamlessly sped the footage up from slow-mo at 96 frames to 26 frames a second so the video caught up with the music at the same time, every time. This would have been nearly impossible to pull off without the use of HTML5 and the hardware acceleration in IE9.

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

Join the conversation