Add ability to auto-pause <video>s inside of content tabs

[alexjlockwood]

Context

No response

Description

I have content tabs in my documentation where each tab contains a <video>. I would like the video to pause when switching between the tabs.

(It's possible what I am asking for is impossible, please let me know if it is, I still wanted to file the request in case because it would be really convenient)

Related links

Here is an example webpage where you can see what I mean: https://rolloff.club/variations/5-waller-grand-canyon/#start-on-blue

If you start playing the video, then switch the tab, you'll see the video continues to play in the background.

Use Cases

It would be useful if the videos would pause when switching tabs, since when you switch the tabs the video is not visible anymore so it makes sense for it not to continue to play in the background.

Visuals

No response

Before submitting

• I have read and followed the change request guidelines.
• I have verified that my idea is a change request and not a bug report.
• I have ensured that, to the best of my knowledge, my idea will benefit the entire community.
• I have included relevant links to the documentation, related issues, and discussions to underline the need for my idea.

[squidfunk]

Thanks for suggesting! We could add this as a tiny special case to the tabs functionality. However, I'm not sure what's the best action if you switch back to the tab. Keep it paused? Resume? Decide based on whether the video should autoplay?

Never used videos in tabs so far. Maybe some other users that do can share some input, too ☺️

[alexjlockwood]

I think keeping it paused would be a good behavior IMO. Seems non-controversial too given that its usually not considered a good UX to have videos auto-play on a webpage. But in the case that you do specify auto-play it could also be fine to do that as well when switching tabs.

[squidfunk]

Auto-pausing of audio and video tags added in 01136b2.

[squidfunk]

Released as part of 9.1.12.

[alexjlockwood]

Thank you!

[stevekirby]

Found this post looking for the exact opposite: I want my videos to keep playing as users switch between content tabs. I'm using very short, muted, autoplaying videos in place of looping GIFs (I'm not using GIFs because I want the alpha channel and better compression of video).

I think @alexjlockwood 's comment was suggesting that if a video was set set to autoplay, then the tab-switching would respect that - it would only force the pause if the video did not have the autoplay tag. That solution would work in my use-case. Or perhaps there are better ways of allowing us to choose behavior per tab group.

[squidfunk]

There was no mention of autoplay except for in #5407 (comment) where I asked what we should do when we switch back, but we did not talk about the autoplay attribute in particular. I'm not sure what the best action is here, because this is again a prime example of "you can't meet everybody needs", and I think the way it currently is implemented is the least invasive.

You might be able to add your own JavaScript, to resume playing once a video becomes visible again.

[stevekirby]

Ah ok. When Alex wrote 'in the case that you do specify auto-play it could also be fine to do that as well when switching tabs.' I figured he was suggesting that playback could resume when switching back to a tab that contained media with the autoplay attribute, but I can see how it's potentially more complicated than that. A tab could contain two videos, one set to autoplay and one not. My current need would be best served by never pausing in the first place, but in another situation you might want pausing and resuming on switching tabs… so yeah I absolutely understand that you can't please everyone.

Ideally, I'd like to add some custom js to effectively reverse the commit and not pause on switch. Is that possible and if so, could you give me any hints on how to go about it?

[squidfunk]

Sorry, I only searched the page for "autoplay" without the hyphen, so I missed it. My fault.

A tab could contain two videos, one set to autoplay and one not. My current need would be best served by never pausing in the first place, but in another situation you might want pausing and resuming on switching tabs

Yes, it is quite impossible to generalize beyond "stop the video when the tab content is hidden".

Ideally, I'd like to add some custom js to effectively reverse the commit and not pause on switch. Is that possible and if so, could you give me any hints on how to go about it?

I'm afraid I can't help you personally with customization, but if you nicely ask on our discussion board, somebody will help you achieve this customization. I'm quite sure that it should work, but I would have to fiddle with it for myself.