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.

start_screen_sharing

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.

pcsettings_screen

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.

big_buck

 

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

big_buck2

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.

playto_stream

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

playto_stream2

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

<video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay />
<script type="text/javascript">
// Step 1: Obtain PlayToManager object for app’s current view.
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
// Step 2: Register for the sourcerequested event (user selects Devices button).
ptm.addEventListener("sourcerequested", function(e) {
var request = e.sourceRequest;
// Step 3: Specify the media to be streamed (to filter devices)
request.setSource(document.getElementById("videoplayer").msPlayToSource);
// The media will then be streamed to the device chosen by the user in the UI.
});
</script>

XAML

<MediaElement x: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.

skate_park

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:

skate_park2

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 300×300 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.
  3. On your developer PC, go to the Devices page in PC Settings, select Add a device and install Windows Media Player (which you set up in step 2 above).
  4. You can use WMP on the second PC as a Play To device from any app that has implemented the Play To contract – including the Photos app, the Play To sample, and your app if you implement the contract.

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

Quickstarts

API Reference & Developer Sample

Thanks,

Gabe Frost, Analy Otero, and the Play To crew

Comments (18)

  1. Jason says:

    PlayTo is my favorite contract, you should also highlight that you can make your app a Play To Receiver as well…

    I put this in all of my apps.

    I especially like this for games, you can use the PlayTo contract to have your game soundtrack blasted onto those killer speakers right from your tablet with no wires. With the Play To Receiver you can allow your game players to create their own game soundtrack from playlists on their Windows Phone for example… Now your players can listen to "The Humpty Dance" without having the game developer pay any licensing fees to 'The Digital Underground'  

    Incredible features for such little work!

  2. Please explain how Play To, a.k.a., DLNA, is not a complete fail.

    I have an Onkyo receiver that supports DLNA.  I tried to configure Windows Media Player in Windows 7 to use it.  It was a horrible experience.  The UI of the DLNA in the Onkyo receiver reminded me of DOS.  I spent hours trying to get this to work, with lots of cryptic messages from Windows.  It could see the device but it could never actually send anything to it.  The only time I got any sound out was using the UI on the receiver to navigate my songs, which was incredibly slow.

    So I bought an Apple TV 2 ($99) and was streaming musing from iTunes to my Onkyo receiver in about 10 minutes.

    I have Windows 8. It sees my receiver on the network, but doesn't send anything to it.  I switch my receiver to DLNA mode and go to Xbox Music and Go to the Devices charm.  Nothing. I'm hearing that Xbox is the only DLNA provider that Windows 8 will talk to.  Is that true?  My 2-year-old Onkyo receiver with DLNA is a brick?

    My music ecosystem is Apple until you guys make this as easy as Apple TV.  And if you tell me I have to buy an Xbox, you are going to get pushback.  Xbox is like $250.  Why don't you guys come out with a Roku-like device that has the guts of the Xbox, but you can't play games, you can only stream content, like movies from Xbox Video and music from Xbox Music, to it?  Sell it for $99.  I might buy one.

  3. It seems to me as though Microsoft is building proprietary functionality on top of the cross-industry DLNA specs, and I'm not convinced that this is a good thing.

    In practical terms, it means my Denon AVR-3808 is not a "Windows Certified Play to" device. As a result, while Windows Media Player can "Play to" my Denon, all of the new Modern UI Apps (e.g. Music) won't. This does not seem like a step forwards to me.

    gcoupe.wordpress.com/…/windows-8-play-to-revisited

  4. Tried Play To in Windows Media Player in Windows 8.  I got it to work, but it mainly served to remind me that the UI for it is far too complicated.  In iTunes, you have a list of speakers, which includes Apple TV and any AirPlay speakers, which I have one.  All you do is choose which speakers you want to play to, but otherwise, iTunes works exactly the same.  It could not be simpler.  My wife and 9-year-old son have no trouble doing this.

    In Windows Media Player, the Play To device is completely separate from what's playing on your computer.  The Play To device has its own play list, I guess you could say.  So you can't just go through your music library playing songs and have them play on the Play To device.  All you can do from the library is add them to the Play To device's play list.  Then you've got to go over to the Play To device's separate window to manage what is going on.  And if all the songs in the Play To device's list have finished playing, and back in the library you pick another song and choose Play To the device, it doesn't start playing.  It gets tacked on to the end of the list.  This user interface is far inferior to the breathless simplicity of iTunes.

    But who cares about Windows Media Player?  It's all about Xbox Music now, right?  Except Xbox Music does not support my existing DLNA device.  I am apparently expected to go buy an Xbox.  The most epic of failures.

  5. If I go to Change PC Settings > Devices and look at the list, my Home Theatre receiver, TX-NR609 is listed *twice*, and the second one says "Offline".  Why would it be listed twice?  This would never happen on a Mac.

  6. I go to the Photos app on my Surface, right-swipe, Devices.  It says "This app can't send to other devices right now."  Well, why not?  Should I wait 10 minutes and try again?  Is it because there are no installed devices that it supports?  Do I need to do something in the app to get to a place where sending to other devices *is* supported?  Why don't you give me a message that actually helps me know what's going on?

  7. BrianDarroch says:

    My Panasonic TV which is DLNA compliant isn't a certified device according to Windows 8. (it says uncertified under Devices). It doesn't show up as a PlayTo device in the Media Apps but does show up with Media Player and works fine.  I guess the code isn't the same for both but you would hope that it would of improved not got worse!

  8. Ricciolo says:

    Same bad experience 🙁 My onkyo nr609 is recognized but not listed when I use Xbox music, photo, or custom app. The Samsung smart tv is not certified. Both are one year old!

  9. Rjinswand says:

    My LG TV isn't recognized either. Using the TVs UI streaming from my PC is possible.

    What's the process of Windows certification exactly? Do hardware manufacturers have to pay for it? If that's the case, I'm pretty sure LG won't do this for older hardware and my TV, bought this year, is useless for this feature – a simple DLNA stream was no problem at all with Windows 7 and that TV.

  10. Jim says:

    Same exact experience as BrianDarroch.    Panasonic TV continues to work with Windows Media Player, via DLNA "Play To".  

    Doesn't work with Windows 8 "Play To."  This is a 2011 plasma.  I ain't planning on replacing it any time soon.  

  11. contextfree says:

    Smallmountain: I think you have to select a bunch of photos (right-click or swipe down, same as in other apps). I agree there should be more feedback leading you to this – most apps do this reasonably well for the share charm, but not devices.

  12. MrbillBricko says:

    Yes but, where is DLNA for our new Winphone 8 so we can send to tv and control our AV receivers etc.  like I could with my Denon 3311 and iPhone with Denon app

  13. Luke says:

    It is totally stupid that MS does not let us use our DNLA devices. This feature could have been great, but MS kills its own great feature by only allowing it to "certified" devices. Technically it would also work with all other DNLA DMR devices, and in fact it works with desktop media player, just not with apps.

    Shame on you Microsoft. Please stop this stupidity. It is ok to show a warning if the device is not certified, but it is not ok to just disable it.

  14. LMK says:

    Off topic question, but I need some guidance from the Win 8 eng team, as the documentation is lacking for what I want to do:

    social.msdn.microsoft.com/…/a08d91de-e1b7-474d-bb31-b2725093618e

  15. Sean says:

    Is the Windows 8 Media Center app a PlayTo/DLNA receiver/target? Or is it only Windows Media Player like in Windows 7?

  16. @Sean – the Windows 8 Media Center application is NOT a Play To/DLNA receiver/target. This is the same as Media Center in Windows 7. In fact, it's probably exactly the same code as the Windows 7 version, except it has had a few options removed, so it's even less functional.

  17. Sean says:

    @Geoffc1, arghh, what a pain! We've used Media Center for years connected to our main LCD in the living room with no keyboard or mouse attached and now with Windows 8 and all the PlayTo functionality in Metro apps etc. we can't play it to Media Center?

  18. @Sean – I'm afraid that's correct. Microsoft has done nothing to improve WMC for Windows 8. Frankly, I suspect it's written on an old code base that is difficult to support, and they want to kill it off. Unfortunately, there's as yet no equivalent to WMC available as a Modern UI app that I can see.