Enabling great Play To experiences from your Windows 8 apps (and websites!)

Play To Overview

The Play To feature allows you to stream music, photos and videos from apps to Xbox and other supported devices on your home network. Imagine being able to easily flick photos and videos from your app to the big screen TV. Or music from your app to your living room speakers. Using the Play To contract, you can easily enable those scenarios for your users from your apps. It’s a great way for you to make your apps more engaging in users’ living rooms.

To deliver a great end-to-end user, developer, and device experience, we designed Play To with a couple of things in mind:

• Users: On networks where users enable Sharing (like home networks), Windows 8 automatically discovers and installs Windows Certified Play To devices. The operating system provides a consistent user experience where users can swipe and tap devices from the Device charm to start Play To from any supported app. All the media focused Microsoft apps have a built-in Play To experience including the Music, Video and Photos apps. Even Internet Explorer 10 implements the Play To contract so users can stream photos and HTML5 music and videos from webpages.
• Developers: The Play To developer contract is a high-level abstraction of the underlying media streaming technologies (protocols, format matching, transcoding, etc.), and makes it easy to quickly implement (and test) Play To experiences in a wide range of apps. All apps (and HTML5 webpages in IE) get a basic experience enabled by default – and can then tailor the experience, or opt-out.
• Devices: The Play To experience in Windows 8 is designed to work with Windows certified Play To devices. Certified devices provide a consistent and reliable experience. There are a number of consumer electronics companies working on Play To certification for their devices spanning multiple device categories.This includes TVs, set top boxes, speakers and audio receivers. As disclosed at the Electronics Entertainment Expo (E3) earlier this year, Play To receiver support is a new feature that’s been rolled out to about 70 million Xbox 360 consoles as part of this year’s fall dashboard update. Keep an eye on the Windows blog for more device announcements!

Building engaging and interactive experiences

Play To makes it easy to deliver compelling multi-screen experiences that will excite your users and make your app stand out in the Windows Store. When you implement Play To, you get:

• Social experiences where users can easily share their favorite photos and videos with friends and families on the biggest screen at home, right from your app.
• Companion experiences where the app can provide a second screen experience – these can range from a simple remote control experience to a rating system where users rate tracks and consume rich album and artist metadata.

In this post we use the Developer Sample and Photos app as an example for how to build and test a great Play To experience.

How does Play To work in Windows 8?

Let’s look first at the end-to-end experience for how Play To works from a user’s perspective – right from joining a new network up to streaming media to a device.

In Windows 8 we provided a simple setup for Play To, without compromising user privacy and security on public networks. Sharing is automatically enabled on PCs that have HomeGroup set up, and on PCs where the user selects Express Settings as part of the first run setup experience. In addition, anytime a user joins a new network, they are immediately asked whether they want to enable sharing and connect to devices. Users can also bring up this message by pressing and holding on the network name in the Network Connection UI fly-out.

After sharing is enabled Windows automatically finds and installs supported Play To devices on the network within approximately 30 seconds. Users can see if devices are available in the Devices page in PC settings. Users can also manually add new devices from the Devices page in PC settings.

After Play To devices are installed, Windows remembers them and automatically tracks their availability on the network. Now, anytime the user is in an app where Play To is possible, the devices are available in the Devices charm.

Let’s look closer and see how this works from the Developer Sample running in Visual Studio. In the sample, Play To is enabled for the Big Buck Bunny Video.

As this application implements the Play To contract in this view, we can swipe and see available devices from the Devices charm.

Selecting a device starts Play To. In this case we select the Xbox 360, and as you can see the Video Control goes into a mode where the video is replaced by a grey overlay. The pause, play, seek and volume buttons now control playback on the target device.

The user can end the session by selecting Disconnect in the Devices charm.

What is the Play To contract?

It’s simple to implement Play To in your app. For any view in the app, here’s how:

1. Create a PlayToManager object for the current view.
2. Register the SourceRequested event to get a notification when the Devices charm is selected.
3. Set the PlayToSource to specify the media element to stream from that view. Based on whether the source is an audio, video or image element, the Devices charm only shows devices that can consume that media type. If the user selects a device, the PlayToSource gets sent to the device. The PlayToSource can be updated to stream the next element after the current media element has completed playing on the device.

Let’s look at a simple example for how to enable Play To for a single media item.

JavaScript

XAML

<MediaElementx:Name="videoplayer"Source="http://www.contoso.com/clip.mp4"
AutoPlay="true"/>
// Step 1: Obtain PlayToManager object for app’s current view.
PlayToManager ptm = Windows.Media.PlayTo.PlayToManager.GetForCurrentView();
// Step 2: Register for the SourceRequested event (user selects Devices button).
ptm.SourceRequested += (PlayToManager sender, PlayToSourceRequestedEventArgs e) => {
    request = e.SourceRequest;
    // Step 3: Specify the media to be streamed.
    PlayToSourceDeferral deferral = request.GetDeferral();
        request.SetSource(videoplayer.PlayToSource);
    deferral.Complete();
}
// The media will then be streamed to the device chosen by the user in the UI.

When should you implement the Play To contract?

If your app includes interesting photos, music, or videos that might be better experienced on a big screen or high quality stereo, Play To makes sense. We’ve seen developers build great experiences in a variety of apps ranging across Lifestyle, Newsreader, Podcast, and Media apps.

Play To is automatically enabled to play music and video elements in Windows 8 apps (but not to view image elements). This default experience works well for individual media elements; however, tailoring Play To enables more complex scenarios like slideshows and playlists.

Streaming to devices with Play To is supported for all music, videos, and images that are not DRM protected – both user collections and web based streaming media. DRM content is not supported as it’s already delivered to devices like Smart TVs directly from the web.

For this post we use the Photos app as an example of a great Play To experience. The Photos app was built to be a great place for users to experience their digital memories - to let them see, relive, enjoy, share, and immerse themselves in memories. Showing digital memories on the biggest screen at home enhances the entire experience and makes it much more interactive.

The Photos app sample

The Photos app created a Play To view that puts users in control of the slideshow. It allows the users to see the whole set of media in a filmstrip view. From there, users can play and pause videos, start a slideshow, or send items to the TV manually. Because photos and videos play on the TV, the app takes advantage of extra screen real-estate on the Windows 8 device to show more, like upcoming items to complement the TV experience.

It’s important to build Play To into the flow of your apps. For the Photos app, a Play To view was built alongside the main layout of the app.

Users can open the Devices charm and see the compatible devices from anywhere in the app. Whenever a user is viewing a photo, video, or collection, they will have the option to open the Devices charm and view device options. Users can send an entire album to another device while browsing, or even send a basket of photos selected from multiple albums.

In this example, the user had some specific photos and videos selected, so those will be the ones sent to the TV. When the user opens the Devices charm, they see available devices that can play the type of content that’s selected. All the app needs to do is specify the content source.

After the user selects a device, they might want to know for sure which device is playing the content. The Photos app creates a nice header that shows where the in-focus content is being streamed. The currently playing media item is highlighted with a rectangle around the photo or video.

Here’s how the app looks when it is playing to the TV:

Making a slideshow even better

Windows certified Play To devices support pre-buffering of the next item in a playlist scenario. Letting the device pre-buffer the next item in a playlist is a great way to ensure great performance – which is critical for a great user experience. Apps can take advantage of this capability by specifying the Play To source for the “next” element in a playlist scenario. This MSDN QuickStart has a detailed overview of how your apps can take advantage of this advanced functionality.

Keeping the slideshow playing

A Play To session continues to play until the user disconnects it. This allows for two kinds of multi-tasking scenarios:

1. Users can navigate to different photo albums in the same app. Enabling this scenario requires the app to build an experience where Play To continues when the user navigates away from the “Now Playing” slideshow. For example, in the Photos app, users can select some photos and share them by email while the slide show keeps playing on the TV, or you can search for the next set of photos they want to show without interrupting the ongoing slideshow.
2. Users can navigate to a different app, for example to check email, while a slideshow is streaming to the TV. In this case the app doesn’t do any work. Windows automatically keeps the app running in the background while a Play To session is active. Apps have approximately 10 seconds to send a new image after the current one is displayed and approximately 10 seconds to send the next audio or video after the current one has ended to keep the session active. When the slideshow, music/video/playlists are done, Windows suspends the app.

Play To do’s and don’ts

Keep the do’s and don’ts list in mind when you’re building a quality Play To experience.

Do:

• Tell the user that your app is playing to another device.
• Rely on the Devices charm for users to connect to devices (and disconnect).
• Keep the Play To session alive when the user navigates to different views in the app.
• For a playlist of music, photos or videos, always specify the next PlayToSource to improve performance.
• See this MSDN reference page for detailed guidelines on how to best use Play To.

Don’t

• Add custom buttons to start or end Play To from within the app – rely on the Devices charm.

What about websites?

Similar to the app experience, Play To is automatically enabled for music, videos, and images in the new IE10 app. IE tries to identify the best media item to use as the Play To source, however, it favors elements that are currently playing, selected, in-focus, and actively in view.

Music and video elements that are 5 seconds or fewer, and images that are 300x300 pixels or smaller, are ignored by IE and never automatically enabled.

Check out this MSDN page for some guidelines and tips for making webpages Play To friendly.

Some notes on media formats

Windows 8 works with a wide range of media formats as outlined here. However, for the best performance, we recommend 1080p JPEG for images, and 720p (or 1080p) MP4 for videos – with H264 video, and AAC audio.

Testing and validating Play To

Play To is easy to test and validate with just a few PCs using Windows Media Player as a Play To receiver. Here’s how:

1. Set up two PCs on your home network – your developer PC, and another PC running Windows Media Player (WMP), to use as the test Play To receiver.
2. On your PC acting as a test Play To receiver, open WMP and select the Stream menu, then Enable remote control of my Player…

• Works with WMP on both Windows 7 and Windows 8, but we recommend using Windows 8 as it has been improved.
• Make sure sharing is enabled on both PCs.
• Make sure you are on a home network. Some enterprise networks have firewall settings and administrative policies that can interfere with Play To device discovery.

You can also use the Xbox to test and validate Play To from your app without any special configuration.

Conclusion and some additional pointers

We hope you find this post useful and informative as you think about the best way to design a great Play To experience into your app. We look forward to hearing your feedback and questions in the comments and seeing your apps in the Windows Store!

Here are some useful pointers to documentation on the Developer Center:

Overview Video and Documentation

• Play To video on Chanel 9
• Streaming media to devices using Play To (Metro style apps using JavaScript and HTML)
• Streaming media to devices using Play To (Metro style apps using C#/VB/C++ and XAML)

Quickstarts

• Quickstart: streaming a slide show using Play To (Metro style apps using JavaScript and HTML)
• Quickstart: Streaming a slide show using Play To (Metro style apps using C#/VB/C++ and XAML)
• Quickstart: Creating a Play To Receiver (Metro style apps using JavaScript and HTML)
• Quickstart: Creating a Play To Receiver (Metro style apps using C#/VB/C++ and XAML)

API Reference & Developer Sample

• Windows.Media.PlayTo
• Play To sample

Thanks,

Gabe Frost, Analy Otero, and the Play To crew