How do I get a callback for autohide?

[debjits1]

I want to show a watermark on my player when the controls are auto-hidden. I want control the visibility of watermark element based on the autohide callback? Is there a way to get a callback on autohide?

[luwes]

Yes! there is the userinactivechange event on <media-controller> that can be listened to or there are also the attributes user-inactive and media-paused that can be used in CSS selectors to show / hide other elements.

[debjits1]

That's great. But I could not find userinactivechange in documentation. Could you help me with an example code?

[dylanjha]

@debjits1 can you try this and let us know if that works?

const mediaController = document.querySelector('media-controller');
mediaController.addEventListener('userinactivechange', function () {
  /* autohide */
});