Iframe media playback pause on visibility changes

[gabrielsanbrito]

Introduction

Web applications that host embedded media content via iframes may wish to respond to application input by temporarily hiding the media content. These applications may not want to unload the entire iframe when it's not rendered since it could generate user-perceptible performance and experience issues when showing the media content again. At the same time, the user could have a negative experience if the media continues to play and emit audio when not rendered. This proposal aims to provide web applications with the ability to control embedded media content in such a way that guarantees their users have a good experience when the iframe's render status is changed.

The main goal of this proposal is to have a mechanism to allow embedder documents to limitedly control embedded iframe media playback based on whether the embedded iframe is rendered or not:

• When the iframe is not rendered, the embedder is able to pause the iframe media playback; and
• When the iframe becomes rendered again, the embedder is able to resume the iframe media playback.

Such a feature can be useful in situations like:

• Websites that toggle the visibility of 3rd-party content which, for user experience reasons, should not be allowed to play back audio while not visible.
  • Without this capability, these sites must completely unload the iframe to guarantee that audio stops and will not play again at some future point. This in turn results in an undesirable user experience when the iframe is made visible again: it must perform a fresh navigation which the user would need to wait for. Additionally, the unload-and-load action may result in the user losing unsaved data, e.g. form field entries.
• A website which loads video advertisements and wants to guarantee the user doesn’t hear the ad when not visible.

To achieve this goal, we propose creating a new "media-playback-while-not-visible" permission policy that would pause any media being played by iframes which are not currently rendered. For example, this would apply whenever the iframe’s "display" CSS property is set to "none" or when the "visibility" property is set to "hidden" or "collapse".

Read the complete Explainer.

Feedback

I welcome feedback in this thread, but encourage you to file bugs against the Explainer.