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...
Building a media-centric Hosted Web App
In our previous post, we kicked off our series on Hosted Web Apps (also known as Project Westminster) by publishing Building a Great Hosted Web App. Today, we’ll show how an existing website that uses audio and video can use JavaScript code to integrate platform controls and functionality.
Why cover media functionality?
By adding simple JavaScript code, media web apps can easily take advantage of Windows integrations in order to provide a richer experience to users than what is offered through the browser.
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.
...
By adding less than 100 lines of JavaScript code, a web app is able to cleanly integrate with OS functionality and give users more control through existing physical and UI style buttons.
For detailed information, check out this MSDN article on the SystemMediaTransportControls class.
Background Audio
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
...
On Windows mobile devices, the way to play audio in the background is through a separate, in-package background task. The background task has to be local, but it can be written in JavaScript. This allows the platform to keep the background task alive in a separate process from that of the app when the app is in the background. When the app enters in the background, it’s only the background task code that’s able to execute.
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
...
Adding theme
A nice touch is to match the app title bar to the color or color theme of the app. The sample accomplishes this through a few lines of JavaScript code, enhancing the appearance of the app.
For detailed information about the properties exposed through the titleBar, check out this MSDN article on the titleBar property.
Wrapping up
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
Additional resources
- 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:
Follow @CH9
Follow @coding4fun
Follow @gduncan411
