Media Session API. Native control for web applications.

Published in

Zattoo’s Tech Blog

4 min readMar 25, 2020

We at Zattoo are pioneers in the streaming sphere. It’s not always easy to deal with the unknown, it still feels like an exciting journey of taming the wilderness.

Being early adopters of technologies helps us better react to upcoming challenges and continuously improve the experience for our users, as we did it with PWA, Voice Control, Casting experience, etc.

This March, we are introducing Media Session support.

What is Media Session?

Media Session API allows a web application to show customized media metadata on platform UI, customize available platform media controls, and access platform media keys, such as hardware keys (found on keyboards), headsets, remote controls, and software keys (found in notification areas and on lock screens of mobile devices).

From left to right: Android 10 lock screen, Android 10 Status Bar, Mac OS Chrome 80 Media Control

How does it work?

Generally, the browser detects unmuted audio or video and displays its meta-information with the ability to control playback. Let’s take a more detailed look.

Meta Information

We can provide three text fields: album, artist, and title.

To populate this information, we need to assign a new instance of window.MediaMetadata to metadata.

Please ensure that mediaSession is supported before running this

And Artwork as multiple images collection.

A browser should pick the most optimal asset from the list. So far, we found image usages only as squares.

Background color for the whole panel taken from dominant in artwork color

To change metadata, you can rewrite it and assign a new one.

To clean metadata, you can assign it to null.

Actions

A media session action is an action that the page can handle in order for the user to interact with the MediaSession

Play & Pause

These actions would be set by default anyway, but if you want to control or forbid them, you can set next.

Seek backward & forward

Allows moving playback time by a short period

Sometimes seeking is not available. For instance, live streams cannot seek to the future.

If you are watching in the replay, you can navigate freely

Previous & Next

Allowing navigation within a playlist. Or in our case, to zap through channels list.

These can be viewed in the control bar now

An extra special feature, especially if watching videos in PiP mode, is the availability of zapping, not only in the media control panel but also in the PiP screen.

Close

Always present, closes media controls panel. If the handler provided, this control will also close playback.

Skip Ad

This allows skipping the advertisement that is currently playing by the specification. However, we have not found support for this handler yet.

Set Position

This part of API allows us to provide correct timing to the progress bar and control it as range control.

It is essential to set a position when you are working with live streams; otherwise, the control bar may have incorrect output.

Support

Chrome 73. Full control over position included in Chrome 81+, more details
Samsung Internet 7+
Firefox announced support, but we have yet to see it

Why do we care?

If you do not support Media Session API, there are generally no negative consequences.

For instance, when you watch some Netflix content on Chrome desktop, the browser is going to try to do the best it can from what it has.

The control panel will display a play/pause control, a title from the page and a theme color as the background. (snapshot from March 2020)

But if your application is not ready to be controlled from outer UI, you may have an unexpected experience. For example, let’s interact with a live stream on Joyn

Users can freely pause and play live streams, although app UI does not allow it, and time output looks strange. (snapshot from March 2020)

That is quite an issue when you legally disallowed or not plan to support pause or replay functionality for live streams.

Conclusion

In conclusion, let us share the findings from our users’ behaviors. Surprisingly, some of our customers are using live streams to listen to sports events, while the app is playing in a pocket, when they are busy walking, driving, or doing something that requires visual attention.

Option to control our app with physical controls could be quite a nice addition to such experience.

Take a look at how it works on zattoo.com