Creating Media apps on Windows 10 with a Hosted Web App
Last week at Build we heard allot about Windows 10 and building apps. Today we're highlighting how you can build a "Hosted Web App" that works with Windows 10 to provide local media services...
Why cover media functionality?
Hooking up the System Media Transport Controls
System Media Transport Controls (SMTC) are the common play, pause, back, and forward buttons exposed through Windows 10. When an app hooks into these controls, it will receive the events following user interaction. It will have the ability to handle them appropriately allowing users to accomplish actions such as skip to next track or pause the current video all from the OS.
For detailed information, check out this MSDN article on the SystemMediaTransportControls class.
No user wants their music to cut out when an app is minimized. By following a few easy steps, this can be avoided altogether on Windows desktop devices.
- Integrate with SMTC (covered above)
- Add the htmlmsAudioCategory=”BackgroundCapableMedia” to the html element
The sample shows how to enable background audio on a phone running Windows 10.
For more detailed information on how background audio functions on Windows, be sure to check out the Basics of Background Audio.
Going full screen
Full screen is a very common scenario for apps that support video playback. This functions differently in the browser versus in an app. In an app, developers have control over whether the video should take up the entire app window or the entire monitor when full screen is called. In order to take up the entire screen, developers must listen for the fullscreenchange DOM event. Once this event fires, a corresponding call to the WinRT API that puts the app in full screen needs to be made.
Listening for voice commands
Simple Cortana integration is easy to add as well. In this sample we show how a user can play a specific video through a voice command
For detailed information about the properties exposed through the titleBar, check out this MSDN article on the titleBar property.
Adding these five easy Windows integrations to a media web app can make it more appealing to customers. There are many more platform features to integrate with so stay tuned and check back for more posts in the Hosted Web Apps series. The best part is, after the app is published to the Windows Store, developers can stick to their existing web workflow should they choose to add new integrations. Pushing new code updates will update the app without the need to re-submit to the Store.
Written by Kiril Seksenov, Engineer on the Web Platform Team
- Full Media Sample
- Hosted Web App Docs
- Hosted Web App Initial Post
- Project Westminster in a Nutshell
- Building and Publishing a Web App:
And don’t forget to check out the other posts in our series: