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.
Whether the app is using the <audio> or <video> HTML element, the controls attribute needs to be added as follows:
Once the DOM is loaded and the <audio> or <video> element is present, subscription to the pause, playing, and ended events is needed. Developers need to call the appropriate functions to update the state of the SMTC so it represents the media state change from the HTML element.
Here are the definitions of the functions that need to be included in order to ensure correct SMTC state is reflected:
Now, moving on to handling user interaction from the SMTC, developers need to ensure that the events raised by the SMTC when a user clicks or touches a button is reflected in the playing media.
Here are the definitions of functions that are invoked in the sample once an event from the SMTC is fired in the app. These need to be implemented in order for the user-intended state change to be applied to the HTML element.
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
- Add a background task in the manifest. This can be done through the manifest editor:
Or directly in XML:
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.
This screen change handling logic calls the correct WinRT based on the fullscreenchange event:
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.
A Voice Command Definition (VCD) file needs to be added to the server so it can be accessed publicly. This VCD file is used to describe the commands that will be registered with the Windows Speech Platform and invoked when a user utters them to Cortana. Here’s the VCD file used in the sample:
Adding the meta tag in the HTML page that’s set as the start page for the hosted web app will ensure the VCD file is downloaded and properly registered by the platform. This will be automatically handled when the web app is running in the app host with the meta tag present. The meta tag must include the location of the VCD file in the content attribute.
Here is the code that needs to be added:
Note: The code snippet shown above uses RGBA for the color values. Developers need to convert from Hex to RGBA if those are the color value types being used. A helper function can be found ">here.
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:
- Keeping your Hosted Web App secure
- Hosted Web Apps: Go Beyond the App
- Building a Great Hosted Web App
Updated June 28, 2018 7:44 am