Integrating video file in Windows Phone 8 and Windows 8 app as app background

These days few top developers are using a video as app’s background. You would imagine it’s quite simple to do so. Yes, the process is small but you should know how exactly it must be done. We don’t just want a video put in the background but we want it to play in loops and also if the user navigates to some other page, it doesn’t start over from the beginning. Just putting a video in the background will work fine if it’s a single page app but the issue with this approach, if the user navigates to the next page, the video will start over in the next page (even if the first page passes the time elapsed of the video to the next page, you will notice a very ugly blinking in the video). Here’s what we mean:

It’s important to understand the architecture behind modern Windows apps. Every time you want to navigate from a page to another, the Frame will render the new page.

 

 

Windows Phone 8.1 XAML or Windows 8.1 app

So to have one infinite video which plays on all pages, we just need to add the MediaElement to the Frame level instead of the page level. To do this, we will need to modify the default template of the Frame. I’ve created the following style to the App.xaml, and gave it the key name RootFrameStyle.

All what we did there is changing the template to a Grid. Inside that grid we’ve added a MediaElement control behind the ContentPresenter. After that, in App.xaml.cs we apply the style to the Frame:


Note: Set the Background of your pages as Transparent or else you won’t be able to view the video.  

Windows Phone 8 (Silverlight app)

While developing for Windows Phone 8 (Silverlight app) set the target as phone:PhoneApplicationFrame instead of Frame.   And set the Style as follows:

Note: MediaElement in Windows Phone 8 Silverlight app doesn’t support IsLooping. So you will have to manually loop the video.

We used Tareq Ateik’s awesome blog post to build this tutorial. You can download the full source code for both projects and use it as a reference.

Windows Phone 8

Download VideoBG.zip (WP 8)

Windows Phone 8.1 and Windows 8.1

Download Video_BG.zip (WP 8.1 & Windows 8.1)